0基础学前端必修课 js+c3变色轮播图
0基础学前端必修课 js+c3变色轮播图
小婧大神 发表于7个月前
0基础学前端必修课 js+c3变色轮播图
  • 发表于 7个月前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 1

腾讯云 学生专属云服务套餐 10元起购>>>   

0基础学前端必修课 js+c3变色轮播图

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

    }

   

    }

    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>

 

前端/JAVA/PHP学习交流群120342833  海量学习资料免费送http://www.kgc.cn/?tuin=7145

共有 人打赏支持
粉丝 0
博文 77
码字总数 3758
评论 (1)
小婧大神
你要的学习资料到了-498854752
×
小婧大神
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: