问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

有个html轮换样式的需求，不知道怎么用js实现，求解。

头像
oovwall
    57918

    是这样的，我要在li中不停的轮换样式，求实现方法，我不知道怎么处理超过第4个时补到最前面的实现，求指点！
    循环开始时 currentIndex = 0 （指针），itemLens = 4（数据条数）
    1.第一次循环
    if(currentIndex >= itemLens){

    currentIndex = 0

    }
    <li class="li-01"></li>
    <li class="li-02"></li>
    <li class="li-03"></li>
    <li class="li-04"></li>
    currentIndex++

    2.第二次循环
    <li class="li-04"></li>
    <li class="li-01"></li>
    <li class="li-02"></li>
    <li class="li-03"></li>
    currentIndex++

    3.第三次循环
    <li class="li-03"></li>
    <li class="li-04"></li>
    <li class="li-01"></li>
    <li class="li-02"></li>
    currentIndex++

    4.第三次循环
    <li class="li-02"></li>
    <li class="li-03"></li>
    <li class="li-04"></li>
    <li class="li-01"></li>
    currentIndex++

    补充一下框架代码
    <pre>

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="farm-current">
    <ul>
        <li class="li-01"></li>
        <li class="li-02"></li>
        <li class="li-03"></li>
        <li class="li-04"></li>
    </ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){
        var timer = null;
        var $items = $('.farm-current').find('li');
        var itemsLens = $items.length;
        var currentIndex = 0;
        setInterval(function(){
            move($items)
        }, 1000);

        function move($items){
            for(var i = 0; i < itemsLens; i++){
                if(currentIndex >= itemsLens){
                    currentIndex = 0
                }


                /*实现代码*/





                currentIndex++;
            }
        }
    })
</script>
</body>
</html>

    </pre>

    javascript
    阅读 2.5k
    3 个回答
    得票最新
    头像
    PARADISELIN
      23711624
      ✓ 已被采纳

      我水平不高，代码写的不好，但是我觉这应该是你要效果

      <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .li-01 {
            color: red;
        }
        .li-02 {
            color: green;
        }
        .li-03 {
            color: blue;
        }
        .li-04 {
            color: yellow;
        }

    </style>
</head>

<body>
    <div class="farm-current">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
        var timer = null;
        var $items = $('.farm-current').find('li');
        var itemsLen = $items.length;
        var arr = ['li-01', 'li-02', 'li-03', 'li-04'];
        var currentIndex = 0;
        timer = setInterval(function() {
            move($items)
        }, 1000);

        // init class
        function pushClass() {
            $.each($items, function(index, ele) {
                $(this).addClass(arr[index]);
            }); 
        }

        function move() {
            var temp = arr.pop();
            arr.unshift(temp);
            $.each($items, function(index, ele) {
                $(this).removeClass().addClass(arr[index]);
            }); 
        }
        pushClass();
    });
    </script>
</body>

</html>
      头像
      oovwall
        57918
        <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .li-01,.li-02,.li-03,.li-04{ width:100px; height:50px;}
    .li-01{ background:greenyellow;}
    .li-02{ background:deeppink;}
    .li-03{ background:lightsalmon;}
    .li-04{ background:indigo;}
</style>
<body>
<div class="farm-current">
    <ul>
        <li class="li-01"></li>
        <li class="li-02"></li>
        <li class="li-03"></li>
        <li class="li-04"></li>
    </ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){
        var timer = null;
        var $items = $('.farm-current').find('li');
        var arr = ['li-01', 'li-02', 'li-03', 'li-04'];
        timer = setInterval(function(){
            move($items)
        }, 1000);

        function move($items){
            var temp = arr.pop();
            arr.unshift(temp);
            $items.each(function(index){
                $(this).removeClass().addClass(arr[index]);
            });
        }
    })
</script>
</body>
</html>
        头像
        小明
          1.3k310

          殊途同归：

          $(function(){

    setInterval(function(){

        var $items = $('.farm-current li');
    
        $items.last().insertBefore($items.first());
    
    }, 1000);

})
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题