仿造天猫、京东、凡客等，轮播图的开发（jQuery）

轮播图思路：
1、轮播图布局
2、定时器实现轮播效果
3、指示器的鼠标移入（mouseenter）、移出（mouseleave）事件

轮播图中的问题及解决办法：
1、轮播图中指示器小圆点的实现。
--> css3 border-radius属性
2、当鼠标停在指示器上，获取当前序号 。
--> index()
3、鼠标在指示器上快速滑动，轮播出现白屏现象。
--> 鼠标移入指示器停止Interval定时器，开启一个setTimeout定时器，如鼠标在指示器停留时间超过200ms，则图片指示器进行切换（同时关闭切换时的淡入淡出动画，防止堆积），否则鼠标移出指示器时关闭这个TImeout的定时器，然后开启Interval定时器。

运行效果图：

轮播图.gif

代码（本文使用的jQuery版本是1.11.3，在低版本IE及W3C浏览器中效果相同）：

    
        
        
    
    
    
       

    
        

            ![](fkimgs/img1.jpg)
            ![](fkimgs/img2.jpg)
            ![](fkimgs/img3.jpg)
            ![](fkimgs/img4.jpg)
            ![](fkimgs/img5.jpg)
            ![](fkimgs/img6.jpg)
            ![](fkimgs/img7.jpg)
            

                

                

                

                

                

                

                

            
        
    

下载：https://github.com/wangwei66666/FKSlideShow
如有问题欢迎交流。

如转载请注明出处，谢谢！