【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）定时函数setInterval的使用

（7）jquery连缀写法风格

 

 

4、jQuery制作轮播的具体步骤：

第一步：制作网页内容（轮播图列表和轮播数字列表）

	
		

			

				

				

				

				

				

			
			

				
1
				
2
				
3
				
4
				
5
			
		
	

 

第二步：添加css样式

代码分析：

（1）border-radius属性：css3中新增的属性，用来设置边框的弯角形状，即可设置圆角矩形，可以设置百分比，也可以设置具体px值。

 

 

第三步：引入jQuery文件

 

第四步：写jquery代码

部分代码分析：

（1）.eq(index)方法：

如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。

（2）stop([clearQueue],[jumpToEnd])方法：

clearQueue：如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd：如果设置成true，则完成队列。可以立即完成动画。

对比案例

HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）

 

 

本案例完整代码：

	
		
		
		
		
		
	
	
		

			

				

				

				

				

				

			
			

				
1
				
2
				
3
				
4
				
5
			
		
	

 

 

 

 

=========这里是结束分割线===========