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

最新推荐文章于 2021-06-28 14:16:06 发布
最新推荐文章于 2021-06-28 14:16:06 发布
阅读量178 收藏
点赞数
分类专栏： JavaScript

效果：
在这里插入图片描述

<!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="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
    <img src="images/6.jpg" alt="">
</div>

<script>
    //获取img
    var 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>
羊驼可以吃吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现图片淡入淡出切换简易效果
11-24
本文实例为大家分享了js图片淡入淡出切换详细代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text...
使用JS中的定时器实现块元素背景颜色淡入和淡出的效果
weixin_43338566的博客
04-16 831
效果展示： HTML代码如下： <body> <div id="div1"></div> </body> CSS代码如下： #div1{ width: 200px; height: 200px; background-color: red; /* 兼容ie6 */ /* filter: alpha(op...
js实现自动更换页面背景图片
weixin_30235225的博客
11-14 3308
今天了解了如何使用js来达到使页面自动更换背景图片，当我们在浏览一些网站的首页时，首页的顶端部分往往是有一些图片构成，同时图片会自动更换，这大概（对，大概，因为我也不确定）使用的是定时器原理吧，即设定一个固定的时间，当过了该段时间时会触发某个事件或者完成某个动作，下面我的这段代码就是设置2000ms时间更换一次背景图片。仅展示js部分代码： window.onload=function(){va...
JavaScript定时器切换背景
从盲流子到程序员
01-03 965
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt;
js实现图片切换的淡入淡出1
HarryWong1993的博客
08-02 473
1、网页结构如图所示 2、页面布局设计细节 　　①分块：一个小方块是一个div。 　　②无序列表一般是竖直排放的，可以通过float让其水平排放。float:left; 　　③三个小方块是浮动上去的，所以要用到position定位。A盒子要相对B盒子进行移动，那么B盒子就设置为relative，A盒子要设置为absolute。这样才能让其进行相对移动。距离的调节，使用top ...
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
12-12
思维是个很诡异的东西,一旦陷入... 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 代码如下: <script src=”http://ajax.googleapis.com/
js实现淡入淡出轮播切换功能
10-20
本文主要分享了javascript实现淡入淡出轮播切换功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
javascript 实现支持淡入淡出翻转等切换效果的tab标签代码
05-18
javascript 实现支持淡入淡出翻转等切换效果的tab标签代码
背景淡入淡出切换的一点小思路
保持丶零距离的博客
07-21 1409
前端日子朋友让我实现一个功能，页面背景多图片淡入淡出切换，查找百度代码各种复杂，对我这种小白来说有点难易理解，琢磨半天终于有了点思路，特记录下来，本人小白，大牛勿喷。 原理不是特别复杂，首先准备两张图片作为背景。 HTML代码： &lt;div id="imgbox" class="bgdiv"&gt; &lt;img src="/images/main_bg3.jpg" /&gt;&...
vuejs 制作背景淡入淡出切换动画的实例
10-18
今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
javascript设置淡入淡出效果
line233的博客
08-13 5603
编码 &lt;div id="fade-obj" style="width:300px;height:300px;background:#000"&gt;&lt;/div&gt; &lt;button id="fade-btn"&gt;淡出&lt;/button&gt; 针对以上 HTML，分别使用 setTimeout 和 setInterval 实现以下功能： 点击按钮时
html5背景如何淡入淡出,JS如何控制背景淡入淡出？
weixin_28867991的博客
06-28 236
html,body{width:100%;height:100%;margin:0pxauto;padding:0pxauto;}.bgdiv{width:100%;height:100%;position:absolute;z-index:-999;}.bgdivimg{width:100%;height:100%;border:0px;}$(document).ready(functio...
原生JS实现淡入淡出轮播图
weixin_42678796的博客
01-19 274
不依赖任何插件 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淡入淡出轮播图</title> <style> *{
用css和js解决背景图片切换和渐变效果
weixin_50505705的博客
03-31 1813
用css和js解决背景图片切换和渐变效果 1.css部分 .b{background-image:url(/image/dayin_logo.gif)left top no-repeat; width: 100%; min-width:1200px; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; -webkit-transition: all 1s linear; transition: a
js淡入淡出图片轮播方式
weixin_43859703的博客
01-22 967
一、思路 将图片拍好层次（z-index）顺序； 用计时器控制图片按照相同时间间隔通过层级的变化来显现； 二、代码 &amp;amp;lt;style&amp;amp;gt; .b { position: relative; width: 600px; height: 400px; border: 1px solid silver; marg...
原生JavaScript实现淡入淡出效果
热门推荐
Liushen01的博客
05-07 1万+
前言 一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。 需求分析 要实现淡入淡出效果，就是要使用到setInterval()函数，改变element节点透明度opa...
js实现图片淡入淡出
sweetllh的博客
04-25 2659
效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
vue v-show 淡入淡出
最新发布
08-23
要实现淡入淡出效果，可以配合使用Vue的过渡效果。引用的例子中展示了一个简单的淡入淡出动画效果： ```html !show">Toggle <p v-show="show">hello export default { data() { return { show: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值