【JavaScript-29】js的例子实现动画的无缝轮播，复制即可用

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画的轮播title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.banner{
			width: 900px;
			height: 460px;
			margin:10px auto 0;
			position: relative;
			border:1px solid #000;
			overflow: hidden;
		}


		/*图片的轮播事件*/
		.img_box{
			position: absolute;
			width: 605%;
			height: 460px;
			top:0;
			left:0;
		}
		.img_box img{
			width: 900px;
			height: 460px;
			float: left;
			/*position: absolute;*/
		}
		/*下面的span事件*/
		.icon{
			position: absolute;
			bottom: 5px;
			left: 50%;
			width: 250px;
			margin-left: -125px;
			z-index: 1;
		}
		.icon span{
			float: left;;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align:center;
			margin:10px;
			background-color: #eee;
			cursor: pointer;

		}
		.icon .active,
		.icon span:hover{
			background-color: orange;
			color:#fff;
		}
		.left,
		.right{
			position: absolute;
			top:50%;
			height: 50px;
			line-height: 40px;
			text-align: center;
			font-size: 40px;
			color:#fff;
			background-color: #eee;
			cursor: pointer;
			z-index:1;
		}
		.left:hover,
		.right:hover{
			background-color: #aaa;
		}
		.left{
			left:10px;
		}
		.right{
			right:10px;
		}
	style>
head>
<body>

	<div class='banner'>
		<div class="img_box">
			<img class="select" src="images/1.jpg" alt="">
			<img src="images/2.jpg" alt="">
			<img src="images/3.jpg" alt="">
			<img src="images/4.jpg" alt="">
			<img src="images/5.jpg" alt="">
		div>
		<div class="icon">
		div>
		
		<div class="left"> < div>
		<div class="right"> > div>
	div>

	<script>
		var ban = document.querySelector(".banner"); 
		var imgs = document.querySelectorAll(".banner img");
		var img_box = document.querySelector(".img_box");
		var icon = document.querySelector(".icon");
		var left = document.querySelector(".left");
		var right = document.querySelector(".right");

		//鼠标经过的时候，就显示左右两侧的按钮
		ban.addEventListener('mouseenter',function(){
			right.style.display = "block";
			left.style.display = "block";
			//清除定时器
			
			clearInterval(timer);
			timer = null;
		});
		ban.addEventListener('mouseleave',function(){
			right.style.display = "none";
			left.style.display = "none";
			//开启定时器
			//不需要加var了，因为已经声明过了
			timer = setInterval(function(){
				//手动调用点击事件
				right.click();
			},2000);
		});


		//动态生成指示器，有几张图生成几张
		for(var i = 0;i<img_box.children.length;i++){
			var span = document.createElement("span");
			span.setAttribute('index',i);
			icon.appendChild(span);
			span.innerHTML=i+1;
			//排他算法设置一开始的默认样式
			span.onclick = function (){
				document.querySelector(".active").className = "";
				this.className = "active";

				//在点击事件中设置一个index，用来获取下标,点击了那个span就会获得这个span的下标
				var index = this.getAttribute("index");
				num = index;
				circle = index;
				// console.log(num,circle);
				// console.log('index',index);
				// 调用动画的函数
				// 最外面的大盒子进行移动
				animate(img_box,- index * img_box.children[0].offsetWidth);
				//移动的是大盒子，每次移动的是图片的宽度*下标值
			}

		}
		//设置初始化的指示器样式
		var spans = document.querySelectorAll(".icon span");
		spans[0].className = "active";

		//克隆第一张图片放到最后
		var first = img_box.children[0].cloneNode(true);
		img_box.appendChild(first);

		//点击右侧按钮，图片滚动一张
		var num = 0;
		//设置一个全局变量，获取指示器的下标
		var circle = 0;
		console.log(num,circle);

		//给右侧按钮设置点击事件
		right.addEventListener('click',function (){
			//如果走到了最后我们复制的一张，此时我们的img_box会迅速复原 left=0；num= 0从头开始滚动
			if(num == img_box.children.length-1){
				img_box.style.left =0;
				num =0;
			}
			//每点击一次让num++
			//每加一次就播放一次动画
			num++;
			animate(img_box,-num*img_box.children[0].offsetWidth);


			//每点击一次它控制的指示器也会跟着变化
			circle++;
			// console.log('circle',circle);
			//图片有六张，指示器少一个，所以要添加一个判断条件
			// console.log(icon.children.length);
			if(circle == icon.children.length){
				circle = 0;
			}
			//先清除其余小圆圈的类名，留下当前指示器的类名
			document.querySelector(".active").className ="";
			//留下当前指示器的样式，第circle个孩子节点的样式改为如此
			icon.children[circle].className ="active";

		})

		//左侧按钮的效果
		left.addEventListener('click',function (){
			//如果走到了最后我们复制的一张，此时我们的img_box会迅速复原 left=0；num= 0从头开始滚动
			if(num == 0){
				num = img_box.children.length -1;
				img_box.style.left=num * img_box.children[0].offsetWidth +"px";
				
			}
			//每点击一次让num++
			//每加一次就播放一次动画
			num--;
			animate(img_box,-num*img_box.children[0].offsetWidth);


			//每点击一次它控制的指示器也会跟着变化
			circle--;
			console.log('circle',circle);
			//指示器的下标值要小于0，如果小于0 则要跳到最后一张上
			console.log(icon.children.length);
			/*if(circle < 0){
				circle = icon.children.length -1;
			}*/
			//老师的用法三元表达式
			circle = circle < 0 ? icon.children.length -1 :circle;
			//先清除其余小圆圈的类名，留下当前指示器的类名
			document.querySelector(".active").className ="";
			//留下当前指示器的样式，第circle个孩子节点的样式改为如此
			icon.children[circle].className ="active";

		})

		//定时器，需要自动播放图片
		var timer = setInterval(function (){
			//定时器的内容和右侧点击内容相似此时我们使用手动调用右侧按钮点击事件
			right.click();
		},2000);

		

		



		



		//动画的轮播，要使用的是动画的效果
		//需要用的点是img，和img的定位
		function animate(element,position){
			//每次调用都会操作同一计时器，需要先清除一下
			clearInterval(element.timer);
			//定时器挂在节点上
			element.timer = setInterval(function (){
				var current = element.offsetLeft;
				//如何变速取决于每次加的大小
				var step  = (position - current)/10;
				//判断，如果大于0就向上取整，如果小于0，就向下取整
				step = step > 0 ? Math.ceil(step) : Math.floor(step) ;
				if(Math.abs(current - position) > step){
					element.style.left = current + step +"px";
				}else{
					element.style.left = position + "px";
					clearInterval(element.timer);
				}
			},20)
		}
		
    
		
		
	script>
	
body>
html>

相关阅读:
Java_抽象类和接口（一）
static
【K8S系列】kubadm部署k8s时service-cidr网络和pod-network-cidr的地址如何定义
 统一潮流控制器（UPFC）的应用，以增强电力系统中的电压稳定性（Matlab代码实现）
NFTScan | 04.15~04.21 NFT 市场热点汇总
 vue3 响应式 ref 、reactive、computed的区别，和watch 监听器的使用
 FPGA实验记录五：I2C读取AHT10温湿度传感器
 故障排查：k8s节点不可用（rancher/hyperkube:v1.21.14-rancher1 Restarting）
GIF图像动态生成-JAVA后台生成
 Android——一个简单的音乐APP(二)
原文地址：https://blog.csdn.net/liqiannan8023/article/details/127075871