原生JS无缝滑动轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

luck_lin

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量2.3k

点赞数

分类专栏： javascript 文章标签：无缝轮播原生JS

本文链接：https://blog.csdn.net/qwe502763576/article/details/79204892

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul,div,img{
		margin: 0;
		padding: 0;
		list-style: none;
		vertical-align: top;
	}
		#banner{
			width: 400px;
			height: 300px;
			margin:50px auto; 
			position: relative;
			overflow: hidden;
		}
		#banner ul{
			width: 400px;
			position: absolute;
		}
		#banner li img{
			width: 400px;
			height: 300px;
			text-align: center;
			line-height: 300px;
			font-size: 40px;
		}
		#dot{
			height: 20px;
			position: absolute;
			left: calc(50% - 80px);
			bottom: 20px;
		}
		#dot i{
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: #fff;
			float: left;
			margin: 0 10px;
			cursor: pointer;
		}
		#dot i.current{
			background: rgb(161,1,34);
		}
		#pages{
			height: 60px;
			width:100%;
			position: absolute;
			top: calc(50% - 30px);
			cursor: pointer;
		}
		 #pages i{
			width:30px;
			height: 60px;
			background: rgb(0,0,0);
			font-size: 22px;
			color: #fff;
			text-align: center;
			line-height: 60px;
			opacity: 0.5;
			font-style: normal;
			position: absolute;
			user-select: none;
		}
		 #pages i.gt{
			right:0;
			top: 0;
			font-size: 21px;
		}
		 #pages i:hover{
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<div id="banner">
		<ul id="ul">
			<li><img src="images2/imgs (1).jpg" alt=""></li>
			<li><img src="images2/imgs (2).jpg" alt=""></li>
			<li><img src="images2/imgs (3).jpg" alt=""></li>
			<li><img src="images2/imgs (4).jpg" alt=""></li>
			<li><img src="images2/imgs (5).jpg" alt=""></li>
			<li><img src="images2/imgs (6).jpg" alt=""></li>
			<li><img src="images2/imgs (7).jpg" alt=""></li>
			<li><img src="images2/imgs (8).jpg" alt=""></li>
		</ul>
		<div id="dot">
			
		</div>
		<div id="pages">
			<i class="lt">^</i>
			<i class="gt">v</i>
		</div>
	</div>
<script src="tool.js"></script>
<script type="text/javascript">
	var lis = $("li", $("#ul")),
		liHeight = lis[0].offsetHeight,
		len = lis.length;
		c = 1; n = 2;
	var first = lis[0].cloneNode(true),
		last = lis[len - 1].cloneNode(true);
	$("#ul").insertBefore(last, lis[0]);
	$("#ul").appendChild(first);

	var html = "";
	for(var i = 0; i < len; i++)
		html += "<i></i>";
	len += 2;
	$("#dot").innerHTML = html;
	$("#ul").style.height = liHeight * len + "px";
	$("#ul").style.top = -liHeight + "px";

	var dots = $("i", $("#dot"));
	dots[0].className = "current";
	var tf = true;
	function move(){
		var _top = -n * liHeight;
		animate($("#ul"), {top : _top}, 300, function(){
			if(n >= len){
				n = 2;
				c = 1;
				css($("#ul"), "top", -liHeight + "px");
			}else if(n <= 1){
				c = len - 2;
				n = len - 1;
				css($("#ul"), "top", c * -liHeight + "px");
			}
		});
		var dotIndex = n - 1;
		if(dotIndex === len - 2)
			dotIndex = 0;
		else if(dotIndex === -1)
			dotIndex = len -3;
		for(let i =0; i<dots.length; i ++)
			dots[i].className = "";
		dots[dotIndex].className = "current";
		c = n;
		n++;
	}
	 var timer = setInterval(move, 3000);
	$("#banner").onmouseover = function(){
		clearInterval(timer);
	}
	$("#banner").onmouseout = function(){
		timer = setInterval(move, 3000);
	}

	on($("#dot"), "mouseover", function(e){
		e = e || event;
		var src = e.target || e.srcElement;
		if(src.nodeName === "I"){
			var index = Array.from($("i", this)).indexOf(src);
			n = index + 1;
			move();
		}
	})
	var timeout;
	on($("#pages"), "click",function(e){
		clearTimeout(timeout);
		if(tf){
			tf = false;
			e = e || event;
			var src = e.target || e.srcElement;
			if(src.className === "gt"){
				n = c - 1;
				move();
			}else if(src.className === "lt"){
				move();
			}
		}
		timeout = setTimeout(function(){
			tf = true;
		},400)
	})
</script>
</body>
</html>

luck_lin

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生JS无缝滑动轮播图

Document ul,div,img{ margin: 0; padding: 0; list-style: none; vertical-align: top; } #banner{ width: 400px; height: 300px; margin:50px auto; position: relative; overflow:
复制链接

扫一扫

专栏目录