js实现的幻灯片（轮播图）

代码上面有注释

.elembox{
				width: 520px;
				height: 280px;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}
			.box{
				
			}
			
			.box .item{
				width: 520px;
				height: 280px;
				position: absolute;	
			
			}
			/* 出场动画			*/
			@keyframes leftout{
				from{
					transform: translateX(0);
				}
				to{
					transform: translateX(-100%);
				}
			}
				@keyframes rightout{
				from{
					transform: translateX(0);
				}
				to{
					transform: translateX(100%);
				}
			}
			/*进场动画*/
			@keyframes rightin{
				from{
					transform: translateX(100%);
				}
				to{
					transform: translateX(0);
				}
			}
			@keyframes leftin{
				from{
					transform: translateX(-100%);
				}
				to{
					transform: translateX(0);
				}
			}
			.box .item.rightin{
				 animation: rightin ease;
				
			}
			.box .item.leftin{
				 animation: leftin ease;
				
			}
			.box .item.leftout{
				 animation: leftout ease;
				
			}
			.box .item.rightout{
				 animation: rightout ease;
				
				
			}
			
			.elembox #btn_left{
				position: absolute;
				width: 30px;
				height: 15px;
				line-height: 15px;
				top: 50%;
				background: red;
				z-index: 100;
			}
			.elembox #btn_right{
				position: absolute;
				width: 30px;
				height: 15px;
				line-height: 15px;
				top: 50%;
				right: 0;
				background: blue;
				z-index: 100;
				
			}
			.elembox .span_ck {
				left: 50%;
				bottom: 0px;
				position: absolute;
			}
			.elembox .span_ck .orange{
				width: 5px;
				height: 5px;
				border: 1px solid #000000;
				border-radius:50% ;
				margin-right: 5px;
				background: #FFFFFF;
				display: inline-block;
			}
			.elembox .span_ck .orange.red{
				background: red;
			}

js代码

var elembox = document.getElementById("elembox");
				var obox = document.getElementById("box");
				var btnl = document.getElementById("btn_left");
				var btnr = document.getElementById("btn_right");
				var spann= document.getElementById("span_ck");
				var time = 1000;//时间
				var lock = false;//添加一种锁的机制
				var index = 0;
				var pan = [];	//存放span
				//创建自适应的div  img  span
				var oimg=["https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg",
				"https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg",
				"https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg",
				"https://img.alicdn.com/tfs/TB1M3_VwQY2gK0jSZFgXXc5OFXa-520-280.png_q90_.webp"
				
				];
				
				
					
				
				var ee=oimg.map(function(value,index){
						//创建一个div
						var ddiv = document.createElement("div");
						//创建一个img
						var iimg = document.createElement("img");
						//创建一个span元素
						var span = document.createElement("span");
						//将value放进img中
						iimg.src=value;
						//将img放进ddiv中
						ddiv.appendChild(iimg);
						
						pan.push(span);
						//给ddiv设置一个class
						ddiv.classList.add("item");
						
						//将ddiv放进box元素中
						obox.appendChild(ddiv);
						//给span一个样式
						span.classList.add("orange");
						spann.appendChild(span);
						ddiv.index=index;
						
						return ddiv;
						
				})
				//将调用此方法的index传进active方法中
				function active(index){
					//pan循环
					pan.forEach(function(va,i){
						//如果传进来的index ===pan里面的i
						if(index ===i){
							//将red样式赋给pan[i]中
							pan[i].classList.add("red");
						}
						else{
							//负责 删除
							pan[i].classList.remove("red");
						}
					})
				}
				//默认最后一个
				active(3);
			//左出
			function leftin(){
					if(lock)return;
					lock=true;
					//第一个元素
					var firstElementchild= obox.firstElementChild;
					//最后一个元素
					var lastElementChild =obox.lastElementChild;
					
					//最后一个元素的上一个元素
					var previousElementSibling = lastElementChild.previousElementSibling;
					
					//最后一个元素的上一个元素 加上  动画
					var result = time / 1000 + "s"
						previousElementSibling.classList.add("rightin");
						previousElementSibling.style.animationDuration= result;
					//最后一个元素设置动画效果	
						lastElementChild.classList.add("leftout");	
						lastElementChild.style.animationDuration=result;
						active(previousElementSibling.index);
						
					setTimeout(function(){
						
						//删除之前添加上去的样式
						previousElementSibling.classList.remove("rightin");
						lastElementChild.classList.remove("leftout");
						obox.insertBefore(lastElementChild,firstElementchild);
						//把最后一个元素 移到第一个元素后面
						
						lock = false;
					},time)
			}
			function rightin(){
					if(lock)return;
					lock=true;
					//第一个元素
					var firstElementchild= obox.firstElementChild;
					//最后一个元素
					var lastElementChild =obox.lastElementChild;
					//把第一个子元素 移到最后一个子元素后面
					obox.appendChild(firstElementchild);
					
						//第一个 加上  动画
						firstElementchild.classList.add("leftin");
						firstElementchild.style.animationDuration= time / 1000 + "s";
						//最后一个元素设置动画效果	
						lastElementChild.classList.add("rightout");	
						lastElementChild.style.animationDuration= time / 1000 + "s";
						active(firstElementchild.index);
					setTimeout(function(){
						
						//删除之前添加上去的样式
						firstElementchild.classList.remove("leftin");
						lastElementChild.classList.remove("rightout");
						lock = false;
					},time)
			}
		
			var tur=setInterval(function(){
				leftin();
			},time);
			
			elembox.addEventListener("mouseenter",function(){
				clearInterval(tur);
			});
			elembox.addEventListener("mouseleave",function(){
				tur = setInterval(function(){
				leftin();
				},time);
			})
			
			
			btnl.addEventListener("click",function(){
				leftin();
			})
			btnr.addEventListener("click",function(){
				rightin();
			})

html

<div class="elembox" id="elembox">
			<div id="box" class="box" >
				
			</div>
			<div id="btn_left">左</div>
			<div id="btn_right">右</div>
			<div class="span_ck" id="span_ck">
				
			</div>
		</div>