轮播图—纯js(javascript)实现：

纯js实现：

要求：算了，还是先看图吧

01.gif

实现效果：
图片自动轮播，鼠标移入停止，移出继续轮播
点击左右按钮实现切换
点击下标焦点实现切换

1、首先实现无缝滚动：
效果：

02.gif

原理：
让ul里的第一个 li 和最后一个 li 内容相同；
通过改变left值，让ul在box中移动；
当移动到最后一个的时候，在让ul回到其实位置；

屏幕快照 2016-11-30 下午4.49.26.png

代码实现：

    
    



    

        

            

            

            

            

            

        
     

        
1
        
2
        
3
        
4
        
5
    
    

2、加入缓冲的匀速运动：
原里：改变每次变化的速度

05.gif

代码实现

3、添加左右点击按钮
效果：

03.gif

难点：

屏幕快照 2016-12-01 上午10.06.19.png

    
    




    

        

            

            

            

            

            

        
        

            <
            >
        
    

4、添加底部焦点：

效果：在最上头；一开始的地方

01.gif

代码实现：

    
    




    

        

            

            

            

            

            

        
        

            

            

            

            

        
        

            <
            >
        
    

百度云链接：http://pan.baidu.com/s/1mi14ijY 密码：d84v