【原生JS】自动渐变轮播

最新推荐文章于 2021-11-08 14:57:37 发布

dizhengshao3220

最新推荐文章于 2021-11-08 14:57:37 发布

阅读量179

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GruntFish/p/6721955.html

版权

渐变主要是通过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);                                    
}

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

转载于:https://www.cnblogs.com/GruntFish/p/6721955.html

dizhengshao3220

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【原生JS】自动渐变轮播

渐变主要是通过CSS3的动画实现。只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程。效果图：HTML:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫