$(function(){

    setInterval(function(){

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

})

2022-11-12 15:21 回答

继续不插电的名单

<!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>
<p 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>
</p>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js?1.2.1"></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>

2022-11-12 15:21 回答

烧蕉_233

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

<!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>
    <p class="farm-current">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>
    </p>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js?1.2.1"></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>

2022-11-12 15:21 回答

蜗牛的家

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签