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函数节流
Dec 09 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
loading动画特效小结
Jan 22 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
微信小程序日历效果
Dec 29 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
微信小程序实现搜索历史功能
Mar 26 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 Mysql编程之高级技巧
2008/08/27 PHP
PHP可变函数的使用详解
2013/06/14 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
基于node.js之调试器详解
2017/08/22 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Python功能键的读取方法
2015/05/28 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python实现画一颗树和一片森林
2018/06/25 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python networkx包的实现
2020/02/14 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
error和exception有什么区别
2012/10/02 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
植树节口号
2014/06/21 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
武当山导游词
2015/02/03 职场文书
大学生个人总结范文
2015/02/15 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
队列队形口号
2015/12/25 职场文书