js改变透明度实现轮播图的算法


Posted in Javascript onAugust 24, 2020

前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法。

实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 #Javascript
You might like
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php实现每日签到功能
2018/11/29 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python3开发环境搭建详细教程
2020/06/18 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
高中生的自我鉴定范文
2014/01/24 职场文书
授权委托书格式
2014/07/31 职场文书
影视后期实训报告
2014/11/05 职场文书
公司介绍信范文
2015/01/31 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Spring 使用注解开发
2022/05/20 Java/Android