zoukankan      html  css  js  c++  java
  • 代码-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="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>
    
    Copyright [2018] by [羊驼可以吃吗] form [https://www.cnblogs.com/phpisfirst/]
  • 相关阅读:
    自己的理想,成长过程逐渐明确
    泯灭众人咱不怕。本身就是一个凡人。重要的是,做一个认真的平凡人。
    Access开端
    JsonHelper使用方式
    安装Office Visio 2007 中文版提示找不到安装源
    今天记
    BINGMAPS GPS经纬度格式转换。
    access 基础知识
    (井底之蛙)惭愧丢人的两段代码希望以后多多长进,警醒自己
    脱离SVN版本控制。DAT文件语句。
  • 原文地址:https://www.cnblogs.com/phpisfirst/p/9819133.html
Copyright © 2011-2022 走看看