用jQuery写一个无缝衔接轮播图,超精简又详细

最新推荐文章于 2022-03-14 19:37:05 发布

置顶温小咸

最新推荐文章于 2022-03-14 19:37:05 发布

阅读量4.1k

点赞数 5

分类专栏： web项目文章标签：轮播图 web项目无缝衔接

本文链接：https://blog.csdn.net/Aboutdreaming/article/details/80328638

版权

web项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过。但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解。

由于无聊就自己动手去写，发现其实很简单，反而去参考别人的会把自己绕晕，下面我附上代码，以及注释，如果有什么看不懂的还可以问我。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- css中只有样式 -->
<style type="text/css">
*,ul,a{
	margin:0;
	padding:0;
	border:0;
	list-style:none;
	text-decoration:none;
}
#banner_wrap{
	width:1000px;
	height:400px;
	margin:0 auto;
	border:1px solid #c0a599;
	margin-top:30px;
	position:relative;
	overflow:hidden;
}
#banner{
	position:absolute;
	height:400px;
	
}
.oLi{
	width:1000px;
	height:400px;
	float:left;
}
</style>
<!-- 这里需要导入jQuery包,不然程序无法执行 -->
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//用到的是jQuery代码,不介绍代码单个意思
$(function(){
	//获取li的长度
	var len=$(".oLi").length;
	//把所有li的宽度算好,赋值给ul当宽度
	$("#banner").width($(".oLi").eq(0).width()*len);
	//id是为了后面的计时器暂停设置的
	var id;
	//index用来统计滚动次数
	var index=0;
	//启动计时器
	id=setInterval(start,3000);
	//给ul(#banner)添加hover选择器事件
	$("#banner").hover(function(){
		//鼠标进入的时候暂停
		clearInterval(id);
	},function(){
		//鼠标离开的时候开始
		id=setInterval(start,3000);
	});
	//计时器中执行的代码块
	function start(){
		//执行的时候次数++
		index++;
		//用animate设置ul的left属性,与左边的距离
		$("#banner").animate({'left':-$(".oLi").eq(0).width()*(index%len)});
		//实现无缝轮播的关键地方
		//判断index%len的值index%len=0的时候表示第一张,那么len-1表示最后一张,
		//最后一张与第一张一模一样,所有直接修改left属性
		if(index%len==(len-1)){
			$("#banner").animate({'left':0},0);
			//同时给index+1跳过第一张图的再次加载
			index++;
		}
		//实际的加载情况就是第一张,第二张,第三张,第四张,第五张(瞬间改变图片为第一张的,是一模一样的替换,不是滚动,看不出来,所以称之为无缝轮播),第二张...
	}
});
</script>
</head>
<body>
<div id="banner_wrap">
	<ul id="banner">
		<li class="oLi"><a href="#"><img alt="" src="../../web/images/itemCat/itemCat_banner1.png"></a></li>
		<li class="oLi"><a href="#"><img alt="" src="../../web/images/itemCat/itemCat_banner2.png"></a></li>
		<li class="oLi"><a href="#"><img alt="" src="../../web/images/itemCat/itemCat_banner3.png"></a></li>
		<li class="oLi"><a href="#"><img alt="" src="../../web/images/itemCat/itemCat_banner4.png"></a></li>
		<li class="oLi"><a href="#"><img alt="" src="../../web/images/itemCat/itemCat_banner1.png"></a></li>
	</ul>
</div>
</body>
</html>