多图展示-轮播图效果

功能需求：

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