js+c3变色轮播图

原创 we1312331 随笔 好东西要分享 508阅读 2017-05-11 08:48:07 举报

<html>
<head>
<title>原生JS轮播</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0}
ul{border:1px solid #eee;width:100%;height:300px;position:relative}
li{width:100%;height:300px;position:absolute;text-align:center;font-size:100px;line-height:300px;top:0px;}
ul>li:nth-child(1){background:red}
ul>li:nth-child(2){background:blue}
ul>li:nth-child(3){background:chartreuse}
ul>li:nth-child(4){background:darkseagreen}

</style>

</head>
<body>
<div>
<ul id="der">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>

<script>
    dimo("der")
    function dimo(x){
        par=document.getElementById(x);

        childs=par.childNodes
        for(i=0;i<childs.length;i++)
            {
                if(childs[i].nodeType!==1)
                {
                    par.removeChild(childs[i])
                }

更多资料每日分享加群 120342833 验证回答 ZZ

            }
            show=0
            setInterval(function(){
                show++
                if(show>childs.length-1)
                {
                    show=0
                }

                for(i=0;i<childs.length;i++)
                {
                    childs[i].style.opacity="0"
                    childs[i].style.zIndex="-2"
                    childs[i].style.transition="all 0.35s"
                }
                childs[show].style.opacity="1"
                childs[show].style.zIndex="1"
            },2000)

    }

</script>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复