js改变透明度实现轮播图的算法
更新时间：2020年08月24日 15:05:48 作者：有点追求
这篇文章主要为大家详细介绍了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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇layui默认选中table的CheckBox复选框方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
BootStrap实现带有增删改查功能的表格(DEMO详解)
这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧2016-10-10
本文将介绍如何使用 JavaScript 创建文件，并自动/手动将文件下载，这在导出原始数据时会比较方便2019-10-10
这篇文章主要介绍了Javascript var变量删除原理及实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
带省略号的分页只有在服务器端才可以实现，下面为大家介绍的是用js实现的带省略号的分页，感兴趣的朋友可以参考下哈，希望对你写出好的分页有所帮助2013-04-04
这篇文章主要介绍了JavaScript获得url所有参数键值表的方法,实例分析了javascript操作URL的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS利用时间戳倒计时的实现示例,本文将提供代码示例和详细的步骤,帮助你实现一个简单而实用的时间戳倒计时,感兴趣的可以了解一下2023-12-12
加入收藏夹功能在网上可以搜索到很多相关的文章，本文要为大家介绍的是如何使用原生js来实现所谓的收藏，感兴趣的朋友可以参考下2013-10-10
深入理解JavaScript中async/await的错误处理方式
在现代JavaScript开发中,异步编程是不可或缺的一部分,async和await是一种强大的异步编程工具,它们使得编写和维护异步代码更加容易和清晰,然而,异步操作仍然可能会出现错误,本文将深入探讨async和await的错误处理方式,提供详细的代码示例和解释2023-09-09
本篇文章主要介绍了JS数组操作之增删改查的简单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论