代码-JS之淡入淡出背景自动切换

效果：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding:0;margin:0;}div{width:600px;height:400px;margin:10px auto;position: relative;}img{/*子绝父相*/position: absolute;z-index: 1;}img:first-child{z-index: 3;}</style>
</head>
<body><div><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/4.jpg" alt=""><img src="data:images/5.jpg" alt=""><img src="data:images/6.jpg" alt="">
</div><script>//获取imgvar imgs = document.getElementsByTagName('img');//定义下标var nowIndex = 0;var nextIndex = 1;//绑定定时器setInterval(function () {if(nowIndex > 5){nowIndex = 0;}//next先一步大于五先执行，实现循环if(nextIndex > 5){nextIndex =0;}//循环更改层级imgs[nowIndex].style.zIndex=2;imgs[nextIndex].style.zIndex=3;//渐变change(imgs[nextIndex]);//下标自增nowIndex++;nextIndex++;},2000);//定义函数实现淡入淡出function change(element) {setOpacity(element, 0);for(var i=0; i<=50; i++){(function (x) {setTimeout(function () {setOpacity(element, 1/50*x);if( x==50){imgs[nowIndex-1].style.zIndex=1;}},10*x);})(i);}}//函数，设置元素的透明度function setOpacity(ele, val){if(ele.filters){ele.style.filter = "alpha(opacity=" + val*100 + ")";}else{ele.style.opacity = val;}}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/phpisfirst/p/9819133.html

代码-JS之淡入淡出背景自动切换相关推荐

js实现淡入淡出轮播图
js实现淡入淡出轮播图先描述一下我的思路第一步:首先使用定位将图片堆积起来第二步:利用透明度的变化来实现图片的淡入淡出第三步:设置一个索引,贯穿整个动画过程. 首先,先展示HTML代码: &l ...
jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
七牛云这个API，让我轻松搞定Banner背景自动切换的功能
一.背景概述我是谁?我是一名前端攻城狮,这周刚到公司不久,我司的产品经理就跑到我面前说:"浪哥,昨晚我看到某 APP 首页 Banner 切换时,Banner 区域的背景色会跟随 Bann ...
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
php背景自动切换图片,威联通NAS自动更换背景图片
威联通NAS自动更换背景图片 2019-12-23 13:45:38 0点赞 5收藏 0评论如何才能快速换一种生活方式?参加#牛年Flag#征稿活动,征集你2021年的购物学习生活计划!>&g ...
Mini Cheetah 代码分析（七）控制器自动切换运动模式
正常情况下,需要在运行mit_ctrl控制器后,有两种指令下发方式:一种是通过游戏手柄遥控器发送射频信号,机器人上的接收器接收到后再处理:另一种是通过在Qt仿真界面的窗口通过lcm通讯发送指令.如果需 ...
js -- 移动端pc端自动切换
1. 判断浏览器类型浏览器判断使用的github开源项目current-device,下面是地址: https://github.com/matthewhudson/current-device在浏 ...
背景色自动切换html,css3动画之背景颜色的自动切换
因为不同浏览器内核的不同所以会产生浏览器兼容性问题背景颜色的变换 div{ width: 200px; height: 200px; background: blue; animation:myfi ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...

代码-JS之淡入淡出背景自动切换

代码-JS之淡入淡出背景自动切换相关推荐

最新文章

热门文章