简单轮播代码

头秃患者77
已于 2023-12-25 09:53:21 修改
阅读量76
点赞数
文章标签： html css
于 2023-12-22 00:00:00 首次发布
本文链接：https://blog.csdn.net/pig_pig7/article/details/135130751
版权
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.clear:after {
			content: '';
			overflow: hidden;
			display: block;
			clear: both;
		}
		.clear {
			zoom: 1;
		}
		.var {
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		.box {
			width: 1600px;
			overflow: hidden;
			font-size: 0;
			
		}
		.box1 {
			width: 99999999999999999999999999px;
		}
		.box img {
			width: 1600px;
		}
		.prev {
			width: 40px;
		    height: 60px;
		    opacity: 0.8;
			position: absolute;
		    top: 50%;
		    left: 0;
		    text-align: center;
		    background-color: #000;
		    font-size: 40px;
		    color: red;
		}
		.next {
		   	width: 40px;
		    height: 60px;
		    opacity: 0.8;
		    background-color: #000;
			position: absolute;
		    top: 50%;
		    right: 0;
		    font-size: 40px;
		    color: red;
		}
		ul {
			list-style: none;
			position: absolute;
			bottom: 30px;
			left: 50%;
		}
		ul li {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-left: 10px;
			background-color: #fff;
			display: inline-block;
		}
		.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="var">
		<div class="box">
			<div class="box1">
				<img src="image/music3.jpg" alt="">
				<img src="image/music1.jpg" alt="">
				<img src="image/music2.jpg" alt="">
				<img src="image/music3.jpg" alt="">
				<img src="image/music1.jpg" alt="">
			</div>
			<span class="prev"><</span>
			<span class="next">></span>
			<ul>
				<li class="liss active"></li>
				<li class="liss"></li>
				<li class="liss"></li>
			</ul>
		</div>
	</div>
</body>
	<script>
		//1.把所有的都获取，首先布局是5张图片，先做自动播放，第一张图片在第二张，
		//所以要var一个给-1600给图片设style，给个定时器,再给个动画，
		//这样图片不是闪现过去，a定义为-=1600，每走一次就减1600，判断，当走到最后一张
		//给个定时器（执行一次的）把动画关闭，直接让图片变为第一张，这样就实现了无缝
		//这里应该注意要把动画时间和定时器时间设为一致，
		//再给个变量=0记录下面的小圆点的移动，判断当他>2时，又变为0
		//循环遍历每个li，清空每个li的样式，给之前的变量加上样式
		//2.左按钮，给一个开关变量，给个点击事件，给个定时器，让它实现每次走完2s内
		//点击只执行一次，同样这里也需要动画，给判断，当他等于第一张的时候，把动画清掉
		//并调到第三张，判断当num<0的时候，把他变为2，同样清样式和添加样式
		//3.右按钮，同样给个开关变量，实现和左按钮一样，只是判断不同，圆点的条件是
		//num>2时，变为0；
		//4.点击时
		window.onload = function(){
			var var_ = document.querySelector(".var");
			var box = document.querySelector(".box1");
			var box1 = document.querySelector(".box");
			var img = document.querySelectorAll("img");
			var prev = document.querySelector(".prev");
			var next = document.querySelector(".next");
			var lis = document.querySelectorAll("li");
			var aa = -1600;
			var num = 0;
			var time;
			// 自动轮播
			img[0].style.marginLeft = -1600+"px"; 
			function times(){
				img[0].style.transition = "margin-left "+2+"s"+" ease-in-out";
				aa -= 1600;
				if(aa == -6400){
					setTimeout(function(){
						img[0].style.transition = "";
					aa = -1600;
					 img[0].style.marginLeft = -1600+"px";
					},2000);
				}
				num++;
				if(num>2){
					num=0;
				}
				for(var i =0;i<lis.length;i++){
					lis[i].setAttribute("class","");
					lis[num].setAttribute("class","active");
				}		
				
				
				img[0].style.marginLeft = aa+"px";

			}
			time = setInterval(times,2500);
			// 左按钮
			var tt=1;
			prev.onclick = function(){
				if(tt==1){
					setTimeout(function(){
						tt=1;
						time =  setInterval(times,2500);
					},2000);
					clearInterval(time);

					img[0].style.transition = "margin-left "+2+"s"+" ease-in-out";
					if(aa == -1600){
						aa=-1600;
						setTimeout(function(){
							img[0].style.transition = "";
							aa = -4800;
							img[0].style.marginLeft = -4800+"px";
						},2000);
					}
					aa += 1600;
					num--;
					if(num<0){
						num=2;
					}
					for(var i =0;i<lis.length;i++){
						lis[i].setAttribute("class","");
						lis[num].setAttribute("class","active");
					}

					img[0].style.marginLeft = aa+"px";
				}
				tt++;
			}
			// 右按钮
			var tt=1;
			next.onclick = function(){
				if(tt==1){
					setTimeout(function(){
						tt=1;
						time =  setInterval(times,2500);
					},2000);
				clearInterval(time);
				img[0].style.transition = "margin-left "+2+"s"+" ease-in-out";
				aa -= 1600;
					if(aa == -6400){
						setTimeout(function(){
							img[0].style.transition = "";
							aa = -1600;
						 	img[0].style.marginLeft = -1600+"px";
						},2000);
					}
				
					num++;
					if(num>2){
						num=0;
					}
					for(var i =0;i<lis.length;i++){
						lis[i].setAttribute("class","");
						lis[num].setAttribute("class","active");
					}
						img[0].style.marginLeft = aa+"px";
				}
				tt++;
			} 
			// 点击小圆点
			var tt=1;
			for (var i = 0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].onclick = function(){
					if(tt==1){
						setTimeout(function(){
							tt=1;
							time =  setInterval(times,2500);
						},2000);
						clearInterval(time);
					img[0].style.transition = "margin-left "+2+"s"+" ease-in-out";
					if(aa == -4800){
						aa=-1600;
						setTimeout(function(){
							img[0].style.transition = "";
							aa = -1600;
							// clearInterval(time);
							img[0].style.marginLeft = -1600+"px";
						},2000);
					}
					aa += 1600;
					
					clearInterval(time);
					num=this.index;
					for (var j= 0;j<lis.length;j++){
						lis[j].setAttribute("class","");
					}
					this.setAttribute("class","active");
					switch(this.index){
						case 0:aa=-1600;break;
						case 1:aa=-3200;break;
						case 2:aa=-4800;break;
					}
				}	
				tt++;
					img[0].style.marginLeft = aa+"px";
				}
			}
		}
	</script>
</html>