滑入滑出轮播图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮播图</title><style>#box{position: relative;width: 400px;height: 300px;border: 1px solid black;overflow: hidden;}#box div{position: absolute;left: 0;top:0;width: 100%;height: 100%;}#box div img{position: absolute;left: 400px;top:0;width: 100%;height: 100%;}#box div img:nth-child(1){left: 0px;}#box ul{list-style: none;position: absolute;left: 50px;top: 250px;width: 100%;height: 100%;}#box ul li{float: left;margin-left: 20px;width: 20px;height: 20px;border-radius: 50%;background-color: pink;}#box ul li:nth-child(1){background-color:red;}</style></head><body><div id="box"><div><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""></div><ul><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div></body></html><script src="js/mover.js"></script><script>//定时器let myTimer = null;//当前图片的下标let currIndex = 0;let imgDoms = document.getElementById("box").firstElementChild.children;let liDoms = document.getElementById("box").lastElementChild.children;//自动播放function autoPlay(){myTimer = setInterval(()=>{//一、处理数据//1、计算数据//outIndex：离开图片的下标let outIndex = currIndex;currIndex++;//2、边界处理if(currIndex>4){currIndex=0;}//二、处理外观//改变图片slide(imgDoms[outIndex],imgDoms[currIndex],-400,1000);//改变豆豆liDoms[outIndex].style.backgroundColor = "pink";liDoms[currIndex].style.backgroundColor = "red";},2000);}//停止function stopPlay(){clearInterval(myTimer);}//跳转到指定的图片function goImg(index){//一、处理数据//1、计算数据//outIndex：离开图片的下标let outIndex = currIndex;currIndex = index;//2、边界处理if(currIndex>4){currIndex = 0;}//二、处理外观//改变图片slide(imgDoms[outIndex],imgDoms[currIndex],-400,1000);//改变豆豆liDoms[outIndex].style.backgroundColor = "pink";liDoms[currIndex].style.backgroundColor = "red";}window.onload = function(){autoPlay();document.getElementById("box").onmouseover = function(){stopPlay();}document.getElementById("box").onmouseout = function(){autoPlay();}for(let i=0;i<liDoms.length;i++){liDoms[i].onclick = function(){goImg(i);}}}</script>
mover.js
//滑入滑出（花多长时间，让某个元素出，某个元素进）//参数:// outDom：出去的dom// inDom:进来的dom// endLeft：终点// timeLong:时长//返回值：无function slide(outDom,inDom,endLeft,timeLong){//计算时间 间隔 和 步长// 已知 总时长 总距离，//希望平滑一些，频率就高一些，时间间隔就短一些let timerSpace = 5;let step = outDom.offsetWidth/(timeLong/timerSpace); // 400/步数let currLeft = 0;let myTimer = setInterval(()=>{//一、处理数据//1、计算currLeft = currLeft-step;//2、边界处理if(currLeft<endLeft){currLeft = endLeft;clearInterval(myTimer);}//二、改变外观outDom.style.left = currLeft+"px";inDom.style.left = currLeft+outDom.offsetWidth +"px";},timerSpace);}//淡入淡出（花多长时间，让某个元素出，某个元素进）//参数:// outDom：出去的dom// inDom:进来的dom// timeLong:时长//返回值：无function fadeInOut(outDom,inDom,timeLong){//计算时间 间隔 和 步长// 已知 总时长 总距离，//希望平滑一下，频率就高一些，时间间隔就短一些let timerSpace = 5;let step = 1/(timeLong/timerSpace); let currOpacity = 0;let myTimer = setInterval(()=>{//一、处理数据//1、计算currOpacity = currOpacity+step;//2、边界处理if(currOpacity>1){currOpacity = 1;clearInterval(myTimer);}//二、改变外观outDom.style.opacity = 1-currOpacity;inDom.style.opacity = currOpacity;},timerSpace);}
