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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
Node.js的包详细介绍
Jan 14 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
js实现电灯开关效果
Jan 19 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
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python常用内置函数总结
2015/02/08 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python实现Flappy Bird源码
2018/12/24 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
最新pycharm安装教程
2020/11/18 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
数控专业个人求职信范文
2014/02/05 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
党员承诺践诺书
2014/05/20 职场文书
公司离职证明标准样本
2014/10/05 职场文书
世界文化遗产导游词
2015/02/13 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
vue特效之翻牌动画
2022/04/20 Vue.js