01/26
2016
简单地说,flexslider是个图片切换插件,依赖于jQuery,提供几种使用场景。使用起来很简单,但如果要对它进行修改那坑也是很多的。我今天用它的基本功能做了个demo。
这个demo外层宽度是100%,适合做通屏banner切换。这种情况下,为使图片始终居中,使用时需修改.slides img的left值为图片宽度的一半。如1920px的图片则设置为-960px。
如果图片是固定宽度,修改.flexslider的宽度为固定宽度就好。此时用于图片居中的.slides img这行css可以删掉。
前面说这个插件坑,是因为这个插件为了它的demo效果,加了边框、阴影、边距等效果,我用的时候又要去掉。它的指示器在图片区域之外,调到图片上结果被图片挡住了←_← 想用它做通屏切换,又加了一些限制。还有其他问题,在demo里面的css注释中可以看到。费尽心力改完一个又一个坑之后,感觉如果自己写一个出来也早就做完了。
flexslider还有些其他的问题,如找不到官方文档,而网上很多参数根本没用了;鼠标点击指示器才会切换,悬浮不行。