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