js小米轮播图 JavaScript仿小米轮播图效果
小幸运 人气:0想了解JavaScript仿小米轮播图效果的相关内容吗,小幸运在本文为您仔细讲解js小米轮播图的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,小米,轮播图,下面大家一起来学习吧。
本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面
有很多写法重复,有空的时候,我把重复的代码封装一下
关于透明度渐变的动画效果
比如 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); } }
加载全部内容