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

    #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:;}

    #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);

}

ps:只能帮你到这里了，按钮什么的没有....

巴特西

【原生JS】自动渐变轮播

最新文章

热门文章