| 本文是自己仿写的小米轮播图的写法，通过透明度改变进行轮播的，新手，写的可能不是很好，有啥不合理的情况，望提出，指正，全部的代码放最下面
有很多写法重复，有空的时候，我把重复的代码封装一下 关于透明度渐变的动画效果 比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0，速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer = setInterval(function(){ var old = getComputedStyle(obj,null)['opacity']; var newVal = +old + +speed;//+是将字符串转变成number类型 if(parseInt(speed)>0 && newVal>=target){ newVal = 1; } if(parseInt(speed)<0 && newVal<=target){ newVal = 0; } obj.style.opacity = newVal;//每次将新的值赋值给该对象的透明度，产生渐变效果 if(newVal==target){ clearInterval(timer);//当透明度的值和目标中的透明度的值一样的时候，将定时器关闭 } },100); }关于自动轮播的方法 我的轮播有四张，但是写了五张图片，第五张和第一张图片是一样的，目的是为了透明度转换的比较合理，不会突然从最后一张变到第一张
全局变量 next代表轮播图将要切换的那一张，pre代表轮播图目前的这张 function autoPlay(){ autoTimer = setInterval(function(){ next++; pre++; next %= OliArray.length; pre %= OliArray.length; if(pre==OliArray.length-1){ pre = 0; } for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; /*解决点击前几张图片时，之后自动轮播没有切换效果的问题， 由于后面的图片显示的效果在前面的图片之上,所以如果在播放到第三张图片时， 点击第一张图片后，自动轮播时，因为第三张图片的显示在第二张图片之上 所以从第一张到第二张，是没有动画效果，且图片一直停在第三张 所以要把将要显示的图片的层级设置为1，其他图片的层级设置为0*/ } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; //这个是点击时，除点击的那个原点外，其他的激活的样式清空 } } OliArray[next].style.zIndex=1; delayOpacity(OliArray[pre],0,-0.1);//将上一张的透明度由1变成0 delayOpacity(OliArray[next],1,0.1);//将要显示的图片的透明度由0变成1 if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1;//到最后一张图片的时候，立即切换到第一张，相对于假装轮播到第一张了，因为用户的眼睛没有那么亮 } PointerArray[next].className = "active"; },3000); }关于点击上一张图片 prevBanner.onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); pre = next;//此时的pre就是原来切换到的那张图片 next = next-1>=0? next-1:OliArray.length-2;//next就是上一张,要切换的图片 for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; } } OliArray[next].style.zIndex = 1; delayOpacity(OliArray[pre],0,-0.1); delayOpacity(OliArray[next],1,0.1); if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1; } PointerArray[next].className = "active"; pre = next - 1; //开启自动轮播 autoPlay(); }关于点击下一张 和自动轮播有点像，但是没有定时器（这里我觉得可以封装函数来写，以后改一下） nextBanner.onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); next++; pre++; next %= OliArray.length; pre %= OliArray.length; if(pre==OliArray.length-1){ pre = 0; } for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; } } OliArray[next].style.zIndex = 1; delayOpacity(OliArray[pre],0,-0.1); delayOpacity(OliArray[next],1,0.1); if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1; } PointerArray[next].className = "active"; //开启自动轮播 autoPlay(); }关于点击某个原点，切换到该原点的图片 for(let i=0;i<PointerArray.length;i++){ PointerArray[i].onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); for(let j=0;j<OliArray.length;j++){ if(j!=i){ OliArray[j].style.zIndex = 0; } if(j!=next) OliArray[j].style.opacity = 0; if(j!=OliArray.length-1){ PointerArray[j].className = ""; } } OliArray[i].style.zIndex=1; delayOpacity(OliArray[next],0,-0.1); delayOpacity(OliArray[i],1,0.1); PointerArray[i].className = "active"; pre = i - 1 == 0? OliArray.length-1:i-1; next = i; //开启自动轮播 autoPlay(); } }html部分 <div class="banner-wapper"> <div class="container"> <div class="banner"> <ul class="img-list"> <li> <a href="#"> <img src="./img/1.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/2.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/3.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/4.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/1.jpg" alt=""> </a> </li> </ul> <div class="pointer"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <div class="prev-next"> <a class="prev" href="javascript:;"></a> <a class="next" href="javascript:;"></a> </div> </div> </div></div> CSS部分 .banner{ position: relative; height: 460px;}.banner .img-list li{ position: absolute; opacity: 0;}.banner-wapper .banner a img{ width: 1226px; height: 460px; vertical-align: top;}.banner .img-list li:nth-child(1){ opacity: 1;}.pointer{ z-index: 2; position: absolute; right: 30px; bottom: 20px;}.pointer a{ float: left; width: 6px; height: 6px; border: 2px rgba(255, 255, 255, 0.4) solid; box-sizing: content-box; margin: 0 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.4);}.pointer a:hover,.pointer .active{ border-color:rgba(0, 0, 0, 0.4); background-color: rgba(255, 255, 255, 0.4);}.prev-next a{ width: 41px; height: 69px; position: absolute; top: 0; bottom: 0; margin: auto 0; background-image: url(../img/icon-slides.png);}.prev-next .prev{ z-index: 2; left: 234px; background-position: -84px 50%;}.prev-next .prev:hover{ background-position: 0 0;}.prev-next .next{ z-index: 2; right: 0; background-position: -125px 50%;}.prev-next .next:hover{ background-position: -42px 50%;}js部分 window.onload = function(){ var Oul = document.getElementsByClassName("img-list")[0]; var OliArray = Oul.getElementsByTagName("li"); var pointer = document.getElementsByClassName("pointer")[0]; var PointerArray = pointer.getElementsByTagName("a"); var nextBanner = document.getElementsByClassName("next")[0]; var prevBanner = document.getElementsByClassName("prev")[0]; var timer,autoTimer, next = 0,pre = OliArray.length-1; PointerArray[0].className = "active"; autoPlay(); // 点击轮播 for(let i=0;i<PointerArray.length;i++){ PointerArray[i].onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); for(let j=0;j<OliArray.length;j++){ if(j!=i){ OliArray[j].style.zIndex = 0; } if(j!=next) OliArray[j].style.opacity = 0; if(j!=OliArray.length-1){ PointerArray[j].className = ""; } } // console.log(pre,next,i) OliArray[i].style.zIndex=1; delayOpacity(OliArray[next],0,-0.1); delayOpacity(OliArray[i],1,0.1); PointerArray[i].className = "active"; pre = i - 1 == 0? OliArray.length-1:i-1; next = i; //开启自动轮播 autoPlay(); } } // 点击下一张 nextBanner.onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); next++; pre++; next %= OliArray.length; pre %= OliArray.length; if(pre==OliArray.length-1){ pre = 0; } for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; } } OliArray[next].style.zIndex = 1; delayOpacity(OliArray[pre],0,-0.1); delayOpacity(OliArray[next],1,0.1); if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1; } PointerArray[next].className = "active"; //开启自动轮播 autoPlay(); } //点击上一张 prevBanner.onclick = function(){ //将自动轮播的定时器清空 clearInterval(autoTimer); pre = next; next = next-1>=0? next-1:OliArray.length-2; for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; } } OliArray[next].style.zIndex = 1; delayOpacity(OliArray[pre],0,-0.1); delayOpacity(OliArray[next],1,0.1); if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1; } PointerArray[next].className = "active"; pre = next - 1; //开启自动轮播 autoPlay(); } // 自动轮播 function autoPlay(){ autoTimer = setInterval(function(){ next++; pre++; next %= OliArray.length; pre %= OliArray.length; if(pre==OliArray.length-1){ pre = 0; } for(let i=0;i<OliArray.length;i++){ if(i!=next){ OliArray[i].style.zIndex = 0; } if(i!=pre) OliArray[i].style.opacity = 0; if(i!=OliArray.length-1){ PointerArray[i].className = ""; } } OliArray[next].style.zIndex=1; delayOpacity(OliArray[pre],0,-0.1); delayOpacity(OliArray[next],1,0.1); if(next==OliArray.length-1) { next = 0; OliArray[next].style.opacity = 1; } PointerArray[next].className = "active"; },3000); } function delayOpacity(obj,target,speed){ clearInterval(timer); timer = setInterval(function(){ var old = getComputedStyle(obj,null)['opacity']; // console.log(getComputedStyle(obj,null)['opacity']) var newVal = +old + +speed; // console.log(obj,newVal) if(parseInt(speed)>0 && newVal>=target){ newVal = 1; } if(parseInt(speed)<0 && newVal<=target){ newVal = 0; } obj.style.opacity = newVal; // console.log(getComputedStyle(obj,null)['opacity']) if(newVal==target){ clearInterval(timer); } },100); }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
关于js typeof 与 instanceof 判断数据类型区别及开发使用
vue-element-admin搭建后台管理系统的实现步骤 |
