码迷,mamicode.com
首页 > Web开发 > 详细

js+c3变色轮播图

时间:2017-05-11 18:34:04      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:nod   move   length   char   for   验证   rem   city   border   

<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>

js+c3变色轮播图

标签:nod   move   length   char   for   验证   rem   city   border   

原文地址:http://www.cnblogs.com/solo111/p/6841930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!