JS如何实现Li循环切换颜色


解决方案 »

  1.   

    弄个定时器，然后removeClass和addClass
      

  2.   

    这个可以用css3实现，还是有点不是很理解你的需求
      

  3.   

    如何只是单纯的奇偶切换可以用.class:nth-child(2n){ background:red}
      

  4.   

    是要点击变色还是自动变色？点击变色直接$(obj).函数，自动的就定时器
      

  5.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
           ul li{float:left;height:50px;width:50px;margin:0 6px;background:#ccc;list-style:none;}
       ul .active{background:red;}
        </style>
    </head>
    <body>
    </body>
        <div class="ob" id="ob" draggable="true">
            <ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
        </div>
       
        <script>

    function $(select){
    return document.querySelector(select);
    }

    function $$(select){
    return document.querySelectorAll(select);
    }

    var li = $$("ul li");
    var num = li.length;
    var count = 1;

    (function(time){

    setInterval(function(){
    if(count < num){
    $("#ob .active").className = "";
    li.item(count).className = "active";
    count++;
    }else{
    count = 0;
    $("#ob .active").className = "";
    li.item(count).className = "active";
    count++;
    }
    },time);

    })(1000); //切换的时间

        </script>
    </body>
    </html>