js改变透明度实现轮播图的算法
前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法。
实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为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图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)