【原生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);                                    
}

 

posted @ 2017-04-17 11:15  GruntFish  阅读(952)  评论(0)  编辑  收藏  举报
返回顶部