模拟淘宝轮播图

功能

1. 自动轮播，鼠标进入轮播区后变为手动控制；
2. 鼠标进入轮播区出现左右移控制箭头；
3. 图片由左右移箭头控制切换，并且底部轮播圆圈相应变化；
4. 无缝轮播；
5. 底部轮播圆圈数量自适应图片数量；
6. 点击圆圈切换图片；
7. 节流阀控制图片切换不会过快

效果

（bug，这里为什么符合大小要求的图片和gif都没法传，嘤）

模拟前端轮播图案例制作效果

备注

1、本案例完整资源参见：前端轮播图案例（含详细注释）
2、可以通过控制台观察索引变化
3、没有做无缝轮播，日后有空再完善
（更新在最后啦，左右侧箭头的无缝轮播。加上了节流阀。）
4、左右移箭头本来当做背景图，但我background-image设置失效，目前没发现是什么问题，所以用了插入图片
（纠正：好吧，我傻了，设置背景图片没有问题，我把属性名写成了background-image，所以说我属性值无效。。。）
background: rgba(0, 0, 0, .5) url(img/arrow-prev.png) no-repeat 8px 4px;

代码

1、html页面框架 lunbo.html

<div class="lunbo">
        <!-- 滚动区域 -->
        <ul class="gundong">
            <li>
                <a href="#"><img src="upload/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"> <img src="upload/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"> <img src="upload/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"> <img src="upload/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 左右移控制区域 -->
        <span class="spanleft" style="display: none;">
            <img src="img/arrow-prev.png"