jQuery实现轮播图的思路、代码及知识点！

最新推荐文章于 2022-05-30 20:51:16 发布

Unicorn-xueya.

最新推荐文章于 2022-05-30 20:51:16 发布

阅读量5.3k

点赞数 3

本文链接：https://blog.csdn.net/xue_smail/article/details/89526374

版权

jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！

一、轮播图实现思路：
1、自动轮播：
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
（3）时间函数每隔1秒执行一次。
2、手动轮播：点击小圆圈按钮，显示相应图片。
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
3、鼠标移上、移开时的事件。
4、点击左右箭头，实现向前向后轮播图片。

二、代码部分。

内容部分：
<body>
<div class="bigbox">
<div class="box">
<a href="" style="z-index: 1"><img src="images/lunbo01.jpg"></a>
<a href=""><img src="images/lunbo02.jpg"></a>
<a href=""><img src="images/lunbo03.jpg"></a>
<a href=""><img src="images/lunbo04.jpg"></a>
<a href=""><img src="images/lunbo05.jpg"></a>
<a href=""><img src="images/lunbo06.jpg"></a>
</div>
<ul class="items">
<li class="item" style="background: #99ffff"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<div class="button">
<button class="btn fl" id="left">&lt;</button>
<button class="btn fr" id="right">&gt;</button>
</div>
</div>
</body>

css部分：

<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.bigbox{
width:500px;
height:350px;
/*border:1px solid #009494;*/
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box{
width:500px;
height:350px;
position: absolute;
top:0px;
}
.box a{
position: absolute;
}
.box img{
width:500px;
height: 350px;
position: absolute;
}
.bigbox .items{
width:150px;
height:15px;
/*border:1px solid red;*/
position: absolute;
bottom: 10px;
left: 175px;
z-index: 3;
}
.items .item{
width:15px;
height:15px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
margin: 0 5px;
float: left;
}
.button{
width: 500px;
height: 35px;
/*border:1px solid #009494;*/
position: absolute;
top:45%;
z-index: 5;
}
.button .btn{
width:25px;
height: 35px;
border:none;
background: rgba(255,255,255,0.5);
font-size: 35px;
color: white;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>

script部分：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function(){//自动轮播
 var num = 0; 	
function imgAuto(abc){		
 	$("a").hide().eq(num).fadeIn(2000);//当前图片的显示隐藏	
 	$(".item").css("background","rgba(255,255,255,0.5)").eq(num).css("background","#99ffff");		
 	if (abc == "r") {
 		num++;			
 		if (num == $("a").length) {//轮播判断，当轮播到最后一张后，回到第一张。
 			num = 0;		
 		}else if(abc = "l"){
			num--;
 		if (num < 0) {//轮播判断，当点击左按钮到第一张后，回到最后一张
 			num = $("a").length-1;
 			}		
 		}	
 	}
 	var move = setInterval(function(){//时间函数
 		imgAuto("r");		
 	},2000)		
 //手动轮播		
 $(".item").click(function(){
 	var index = $(this).index();//当前点击小圆圈的下标
 	$("a").hide().eq(index).show();//隐藏图片，当轮播到当前对应的时显示
 	$(".item").css("background","rgba(255,255,255,0.5)").eq(index).css("background","#99ffff");
 		num = index;  //目的是当点击某个小圆点后能接着轮播；
 	});		
 //鼠标移入移出事件		
	 $(".bigbox").hover(function(){				
 		clearInterval(move);		
	 },function(){
 		move = setInterval(function(){				
 			imgAuto("r");			
 		},1000);	
 	});		
	 //左右按钮的点击事件
	$("#left").click(function(){			
		imgAuto("l");		
		})		
	$("#right").click(function(){			
		imgAuto("r");		
	})
})
</script>

三、所学知识点。
（1）hide() 隐藏
（2）show() 显示
（3）eq（index）选区索引等于index的元素
（4）setInterval() 间隔指定时间内不停的执行指定代码
（5）click() jquery点击事件
（6）hover() 相当于mouseover和mouseout时间的组合
（7）clearInterval() 清除setInterval

Unicorn-xueya.

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图的思路、代码及知识点！

jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！一、轮播图实现思路：1、自动轮播：（1）使所有的图片...
复制链接

扫一扫