• 【原生JS】自动渐变轮播


    渐变主要是通过CSS3的动画实现。

    只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程。

    效果图:

    HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" type="text/css" href="css/style3.css" />
            <script type="text/javascript" language="JavaScript" src="js/script3.js"></script>
        </head>
        <body>  
            <div id="box">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </body>
    </html>

    CSS:

        *{margin:0; padding:0;}
        #box{width:300px; height:165px; border:1px black solid; margin:10px auto;}
        #box ul{list-style:none; position:relative;}
        #box ul li{width:300px; height:165px; position:absolute; transition:all 1s; opacity:0;}
        #box ul li:nth-of-type(1){background:url(../img/img1.jpg); background-size:100%;}
        #box ul li:nth-of-type(2){background:url(../img/img2.jpg); background-size:100%;}
        #box ul li:nth-of-type(3){background:url(../img/img3.jpg); background-size:100%;}
        #box ul li:nth-of-type(4){background:url(../img/img4.jpg); background-size:100%;}

    JS:

    onload = function(){
        var li = document.getElementById('box').getElementsByTagName('li');
        var index = 0;     
        goto();
        function goto(){
            for(var i=0;i<li.length;i++){li[i].style.opacity = 0;}          
            if(index == li.length) index = 0;                                 
            li[index++].style.opacity = 1;                                    
    
        }
        setInterval(goto,3000);                                    
    }
    转载请指明出处!
  • 相关阅读:
    深入Java微服务之网关系列1:什么是网关
    logstash系列快速调试demo
    logstash系列input和output方案预研结果
    99zeppelin使用和一些预研
    filebeat系列如何给日志增加一些额外的标记字段
    filebeat系列快速调试demo
    logstash系列使用中的一些点
    Redis常用命令
    springboot使用外置tomcat
    Redis持久化和事务
  • 原文地址:https://www.cnblogs.com/GruntFish/p/6721955.html
Copyright © 2020-2023  润新知