js改变透明度实现轮播图的算法
前面有分享过改变层级的轮播图算法，今天继续利用透明度来实现无位移的轮播图算法。
实现逻辑：将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为0，然后在让初始的第一张图片的透明度为1即可，具体算法如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>改变透明度算法(经典)</title>
<stylemedia="screen">
*{
margin:0;
padding:0;
}
.wrap{
width:60%;
margin:auto;
position:relative;
}
.wrapimg{
width:100%;
position:absolute;
left:0;
top:0;
transition:2s;
}
.wrapimg:nth-child(1){
position:relative;
}
.wrap.follow{
width:150px;
height:30px;
margin:auto;
display:flex;
justify-content:space-between;
}
.wrap.followspan{
width:10px;
height:10px;
border-radius:50%;
border:3pxsolidgray;
}
.wrap.followspan:hover{
cursor:pointer;
}
</style>
</head>
<body>
<divclass="wrap">
<imgsrc="img/01.jpg"alt=""/>
<imgsrc="img/02.jpg"alt=""/>
<imgsrc="img/03.jpg"alt=""/>
<imgsrc="img/04.jpg"alt=""/>
<inputid="leftBut"type="button"name="name"value="◀︎">
<inputid="rightBut"type="button"name="name"value="▶︎">
<divclass="follow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<scripttype="text/javascript">
//获取所需元素
varimages=document.querySelectorAll('.wrapimg');
varspans=document.querySelectorAll('.followspan');
varleftBut=document.getElementById('leftBut');
varrightBut=document.getElementById('rightBut');
//定义有参函数
functionshowImage(index){
for(vari=0;i<images.length;i++){
spans[i].index=i;//自定义属性，得到对应的下标
images[i].index=i;//自定义属性，得到对应的下标
images[i].style.zIndex=100-i;//为图片排列顺序
images[i].style.opacity='0';//将图片透明度全部赋值为0
spans[i].style.background='gray';//圆点北京色全部设置为黑色
}
//将传入参数下标值的图片透明度赋值为1
images[index].style.opacity='1';
//将传入参数下标值的图片的背景色赋值为white
spans[index].style.background='white';
}
showImage(0);//初始设置下标为0的图片和圆点的样式
varcount=1;//获取计数器
//定义自动轮播函数
functionimageMove(){
//判断count的值如果能被4整除，则将count重新赋值为0；
if(count%4==0){
count=0;
}
//将count值当做参数传给函数showImage();
showImage(count);
count++;//执行一次＋1
}
//设置两秒调用一次函数imageMove()，并且赋值给imageInitailMove
varimageInitailMove=setInterval('imageMove()',2000);
//向左点击事件
leftBut.onclick=function(){
//先清除定时器
clearInterval(imageInitailMove);
//由于和自动轮方向相反所以要判断count的值当值为0时，重新赋值为4，继续循环
if(count==0){
count=4;
}
count--;
showImage(count);//调用函数count先自－
imageInitailMove=setInterval('imageMove()',2000);
}
//向右的点击事件
rightBut.onclick=function(){
clearInterval(imageInitailMove);
imageMove();//由于和自动轮播的方向相同所以直接调用
//重新为定时器赋值
imageInitailMove=setInterval('imageMove()',2000);
}
//圆点的点击事件
for(vari=0;i<spans.length;i++){
spans[i].onclick=function(){
clearInterval(imageInitailMove);
//将当前点击的圆点的下标值赋值给count
count=event.target.index;
//调用函数
showImage(count);
imageInitailMove=setInterval('imageMove()',2000);
}
}
</script>
</html>
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。