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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS轮播图的实现方法，包括了JS轮播图的实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： 思路 通过编写过渡动画实现轮播效果，图片的出现动画以及移出动画。显示区的图片移出，切换的图进入分别调用动画，程序关键点：哪张图应该进入，哪张图
-
本文向大家介绍js实现透明度渐变效果的方法，包括了js实现透明度渐变效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下： 这里可实现一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30的效果。 要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个
-
本文向大家介绍原生js实现轮播图，包括了原生js实现轮播图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js轮播图的具体实现代码，供大家参考，具体内容如下 CSS： html： js： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现轮播图特效，包括了js实现轮播图特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下 只需要修改图片的src即可 html: style: script: 更多关于轮播图效果的专题，请点击下方链接查看学习 javascript图片轮播效果汇总 jquery图片轮播效果汇总 Bootstrap轮播特效汇总 以上
-
本文向大家介绍js实现图片轮播效果，包括了js实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击 CSS样式： HTML布局( a标签最好加个title属性 )： JS脚本插件： 页面调用： 希望本文所
-
本文向大家介绍js实现简单的轮播图效果，包括了js实现简单的轮播图效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现简单的轮播图效果的具体代码，供大家参考，具体内容如下 代码： js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。