前端学习笔记-JS-BOM-轮播图案例/节流阀

网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧同理

3.图片播放的同时，下面的小圆圈模块跟随一起变化

4.点击小圆圈，可以播放相应的图片

5.鼠标不经过轮播图，轮播图也会自动播放图片

6.鼠标经过，轮播图模块，自动停止播放

 

HTML主要布局部分：

 <div class="focus fl">
            <!-- 左侧按钮 -->
            <a href="javascript:;" class="arrow-l">
                &lt;
            </a>
            <!-- 右侧按钮 -->
            <a href="javascript:;" class="arrow-r">  </a>
            <!-- 核心的滚动区域 -->
            <ul>
                <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>
            <!-- 小圆圈 -->
            <ol class="circle">

            </ol>
        </div>