jQuery旋转列表 [英] JQuery Rotating List

问题描述

我正在尝试旋转表中的项目列表(即:).我正在尝试做的是删除第一个项目，并在表的末尾添加一个项目.我能够删除第一个项目，但我始终无法每10秒重做一次.也许，看一下代码会带来更好的主意.

I'm trying to rotate a list of items (ie: ) in a table. What i'm trying to do is to have the first item removed and an item added at the end of the table. I'm able to get the first item removed but i'm stuck at how i can constantly redo this every 10 sec. Perhaps, looking at the code will give a better idea.

代码:

        $num_ads = 0;
        if (isset($ads[0])) {
            foreach($ads as $row) {
                                    ...
                                    ...
                echo '<td class="featured_ads_td" id="featured_'.$num_ads.'">';
                                    ...
                                    ...
                                    $num_ads++
                            }
                    }

所以我要做的是给表中的每个项目赋予唯一的ID.在这种情况下，第一项将是Feature_0，然后是Feature_1，feature_2..etc

So what i've done is that i gave each of the item in the table a unique id. In this case first item will be featured_0, followed by featured_1, featured_2..etc

JavaScript

Javascript

<script src="/jquery-latest.min.js"></script>
<script type="text/javascript">
        var ad_refresh = setInterval(function(){
            $('#featured_0').fadeOut('slow');
            $('#featured_0').attr('id','removed');
        }2000);
</script>

在下面使用此脚本将删除我的第一项.但是，无论如何，我如何使第一项功能为_0，以便我每2秒可以递归一次?或者，如果有更好的方法，请告诉我.我对javascript和jquery的了解仍然非常有限.

Using this script below will remove my first item. But is there anyway how i can make the first item featured_0 so i can recurse this every 2secs? Or if there is a better way of doing this, please do let me know. My knowledge of javascript and jquery is still very limited.

感谢您的帮助.

推荐答案

如果我确实正确理解了您的问题，则可以通过以下方式淡出元素并将其放置在其余元素之后:

If I did understood your question properly, something along this lines will allow you to fadeOut the element and place it after the remaining ones:

请参见以下工作的小提琴示例！

jQuery

var ad_refresh = setInterval(function(){
    var $target = $('.featured_ads_td:first-child');
    $target.fadeOut('slow', function() {
        $target.appendTo('tr').show();
    });
},2000);

这篇关于jQuery旋转列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！