前面有分享过改变层级的轮播图算法，今天继续利用透明度来实现无位移的轮播图算法。
实现逻辑：将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为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> <img src="https://www.jb51.net/img/01.jpg" alt="" /> <img src="https://www.jb51.net/img/02.jpg" alt="" /> <img src="https://www.jb51.net/img/03.jpg" alt="" /> <img src="https://www.jb51.net/img/04.jpg" alt="" /> <input type="button" value="◀︎"> <input type="button" value="▶︎"> <div> <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>
精彩专题分享：