• 【原生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);                                    
    }
    转载请指明出处!
  • 相关阅读:
    hdu 1108 最小公倍数
    hdu 1106 排序
    hdu 1097 A hard puzzle
    hdu 1076 An Easy Task
    hdu 1064 Financial Management
    hdu 1061 Rightmost Digit
    hdu 1050 Moving Tables
    hdu 1060 Leftmost Digit
    hdu 1049 Climbing Worm
    hdu1104
  • 原文地址:https://www.cnblogs.com/GruntFish/p/6721955.html
Copyright © 2020-2023  润新知