用jQuery实现的一个轮播（学习笔记）

最新推荐文章于 2023-02-13 06:26:15 发布
六眼飞鱼、
最新推荐文章于 2023-02-13 06:26:15 发布
阅读量177
点赞数
分类专栏： html5的学习
本文链接：https://blog.csdn.net/qq_26387051/article/details/105498705
版权
html5的学习专栏收录该内容
4 篇文章 1 订阅
订阅专栏
页面效果展示.
整体代码（代码讲的比较详细我就不过多解释了）
<!DOCTYPE html>                                                                                 
<html>                                                                                          
	<head>                                                                                      
		<meta charset="utf-8" />                                                                
		<title>轮播展示</title>                                                                     
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>   
		<style type="text/css">                                                                 
			*{                                                                                  
				padding: 0;/*取消所有标签的填充*/                                                        
				margin: 0;/*设置所有标签的margin为0*/                                                   
			}                                                                                   
			#loop{                                                                              
				width:790px;                                                                    
				height: 320px;                                                                  
				display: flex;                                                                  
				overflow-y: hidden;/*隐藏Y轴滚动条*/                                                  
				overflow-x: hidden;/*隐藏x轴滚动条*/                                                  
				list-style: none;/*取消表格样式*/                                                     
				margin: 0 auto 0; /*居中*/                                                        
			}                                                                                   
			#options{                                                                           
				width:790px;                                                                    
                                                                                                
				display: flex;                                                                  
				margin: 0 auto 0; /*居中*/                                                        
				list-style: none;/*取消表格样式*/                                                     
				                                                                                
			}                                                                                   
			                                                                                    
			#options>a{                                                                         
				flex-basis: 158px;                                                              
				line-height: 40px;                                                              
				text-align: center;                                                             
				text-decoration: none;                                                          
				font-size: 20px;                                                                
                                                                                                
			}                                                                                   
			.unchoose {                                                                         
				background-color: #E3E2E2;                                                      
				color: #424242;                                                                 
			}                                                                                   
			.choose {                                                                           
				background-color: #F7F6F6;                                                      
				color: #C59B66;                                                                 
				border-bottom: 2px solid #CEA861;                                               
			}                                                                                   
			                                                                                    
		</style>                                                                                
	</head>                                                                                     
	<body>                                                                                      
		<ul id="loop">                                                                          
			<li><img width="790px" height="320px" src="img/1.jpg"/></li>                        
			<li><img width="790px" height="320px" src="img/2.jpg"/></li>                        
			<li><img width="790px" height="320px" src="img/3.png"/></li>                        
			<li><img width="790px" height="320px" src="img/4.png"/></li>                        
			<li><img width="790px" height="320px" src="img/5.png"/></li>                        
		</ul>                                                                                   
		<div id="options">                                                                      
			<a href="#">第一个</a>                                                                 
			<a href="#">第二个</a>                                                                 
			<a href="#">第三个</a>                                                                 
			<a href="#">第四个</a>                                                                 
			<a href="#">第五个</a>                                                                 
		</div>                                                                                  
		                                                                                        
		<script type="text/javascript">                                                         
			/*创建一个切换轮播图的函数*/                                                                    
			$("#options>a").addClass("unchoose");                                               
			var index = 1;                                                                      
			var width = 790;                                                                    
			function move() {                                                                   
				// 删除上次的choose,这的代码是删除5个A的choose,但是没关系,只有一个a有choose                             
				$("#options>a").removeClass("choose");//取到options下子代全部a标签 然后移出choose            
				// 给所有a添加为unchoose                                                              
				$("#options>a").addClass("unchoose");                                           
				// 把对应的选项卡设置为choose                                                             
				$("#options>a").eq(index).attr("class", "choose");                              
			                                                                                    
				// index++代表先把值取出来做运算,然后自己加1                                                    
				var distance = (index++ * width) + "px";                                        
				if(index == 5) index = 0; // 到最后一张要重置为0                                         
				// 用200毫秒的时间完成滚动条拖动                                                             
				$("#loop").animate({"scrollLeft":distance},200);                                
			}                                                                                   
			                                                                                    
			//设置一个定时器,过3000毫秒去调用move这个函数,注意这里的move不能加().                                        
			var timer = setInterval(move, 3000);                                                
			                                                                                    
			/*加入鼠标移入,切换轮播效果*/                                                                   
			$("#options>a").mouseover(function(){                                               
				// 获取当前触发的a的index索引                                                             
				var chooseIndex = $(this).index();                                              
				// 移动之前要设置index为对应的A的位置                                                         
				index = chooseIndex;                                                            
				// 要移动                                                                          
				move();                                                                         
			                                                                                    
				// 清除定时器                                                                        
				clearInterval(timer);                                                           
				timer = setInterval(move, 3000);                                                
			                                                                                    
			});                                                                                 
			                                                                                    
			                                                                                    
			// setInterval是周期性的,每过3S就会执行一次                                                      
			// setTimeout只执行一次                                                                  
		</script>                                                                               
	</body>                                                                                     
</html>