JS实现轮播图(自动+手动)

obj.style.left = obj.offsetLeft + step + ‘px’;

}

},10);

}

在本例中，我们将这个动画函数封装在一个js文件里，这样我们在移动父盒子时，就可以直接调用这个动画函数。

对这里有疑问的同学可以去我的上一篇讲动画函数封装的文章里了解一下。

功能分析

===================================================================

我们分析下要做一个完美的网页轮播图都应该具备哪些功能：

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

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

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

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

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

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

代码示例

===================================================================

<

>

• 
• 
• 
•