多图展示-轮播图效果

功能需求：

1. 鼠标经过轮播图模块，左右按钮显示，离开则隐藏；
2. 点击右侧按钮一次，图片往左移动播放一张，以此类推，左侧按钮同理；
3. 图下方的小圆点模块跟随图片播放一起改变；
4. 点击小圆点也可以播放相对应的图片；
5. 轮播图有自动播放效果，当鼠标经过时停止，离开后继续。

具体效果如图：

具体代码

• HTML

    <div class="focus">
    	<!-- 左右箭头按钮 -->
        <button class="arrow_l" style="display: none;"><i></i></button>
        <button class="arrow_r" style="display: none;"><i></i></button>
        <!-- 多图模块 -->
        <ul>
            <li>
                <a href="#"><img src="upload/focus.png"></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus2.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus3.jpg