JavaScript 实现无位移透明度过渡轮播图

完整代码示例

<!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>