js改变透明度实现轮播图的算法

时间：2021-05-26

前面有分享过改变层级的轮播图算法，今天继续利用透明度来实现无位移的轮播图算法。

实现逻辑：将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为0，然后在让初始的第一张图片的透明度为1即可，具体算法如下：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title> <style media="screen"> * { margin: 0; padding: 0; } .wrap { width: 60%; margin: auto; position: relative; } .wrap img { width: 100%; position: absolute; left: 0; top: 0; transition: 2s; } .wrap img:nth-child(1) { position: relative; } .wrap .follow { width: 150px; height: 30px; margin: auto; display: flex; justify-content: space-between; } .wrap .follow span { width: 10px; height: 10px; border-radius: 50%; border: 3px solid gray; } .wrap .follow span:hover { cursor: pointer; } </style> </head> <body> <div class="wrap"> <img src="img/01.jpg" alt="" /> <img src="img/02.jpg" alt="" /> <img src="img/03.jpg" alt="" /> <img src="img/04.jpg" alt="" /> <input id="leftBut" type="button" name="name" value="◀︎"> <input id="rightBut" type="button" name="name" value="▶︎"> <div class="follow"> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> <script type="text/javascript"> // 获取所需元素var images = document.querySelectorAll('.wrap img'); var spans = document.querySelectorAll('.follow span'); var leftBut = document.getElementById('leftBut'); var rightBut = document.getElementById('rightBut'); // 定义有参函数function showImage(index) { for (var i = 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的图片和圆点的样式 var count = 1;//获取计数器// 定义自动轮播函数function imageMove() { // 判断count的值如果能被4整除，则将count重新赋值为0；if (count % 4 == 0) { count = 0; } // 将count值当做参数传给函数showImage(); showImage(count); count++;//执行一次 ＋1 } // 设置两秒调用一次函数imageMove()，并且赋值给imageInitailMove var imageInitailMove = 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 (var i = 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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章