【jQuery】前端项目实践案例4——使用jquery制作轮播图效果！

1、jQuery实现的轮播图效果：

案例要求：5张图片自动循环播放。图片播放的同时，对应着右边的数字也发生样式变化。用户鼠标移动到不同数字时，切换与该数字对应的图片，鼠标移开后，图片再次自动进行播放。

 

 

2、轮播图实现思路：

（1）div+css布局，制作轮播图列表以及配套的数字列表。

（2）轮播图默认轮播，即在ready事件里，直接执行函数。

（3）轮播图事件的执行：循环执行使用setInterval方法。

（4）鼠标移上去，轮播图停止，同时轮播数字样式发生变化，鼠标离开，轮播图继续。

 

3、制作轮播图需要掌握的知识点：

（1）基本html知识、基础div+css布局

（2）正确引用jquery文件

（3）jquery选择器的使用：元素选择器、id选择器的使用

（4）对元素节点的操作：遍历子元素children()、遍历兄弟元素siblings()、指定元素eq()方法的使用

（5）jQuery基本动画的使用：fadeIn()方法和fadeOut()方法的使用、鼠标mouseover和mouseout的使用、停止动画stop()方法的使用

（6）定时函数se