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 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
jquery键盘事件介绍
Jan 31 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
详解Node.js串行化流程控制
May 04 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
详解JavaScript 中的批处理和缓存
Nov 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实现图片添加水印功能
2014/02/13 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
linux面试题参考答案(9)
2015/01/07 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
安全学习心得体会范文
2016/01/18 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技