jquery - 如何自动化轮播

Question

我正在创建自己的旋转木马，它会根据单击的按钮向左或向右移动一步。这部分代码按预期工作，因此我没有在此处包含它

我无法完成的是在页面加载时自动或旋转轮播。也就是说，每隔 4 或 5 秒，当前事件元素应移动到下一个元素。

下面的代码显示了我当前的尝试。

$('.promo-nav').show();
function rotate() {
    var showid = 0;   
    if(!$(this).parent().parent().hasClass('active')){              
        id = $(this).parent('li').index();              
        $(this).parent().parent().children('li.active').removeClass('active');
        $(this).parent().addClass('active');
        $(this).parent().parent().parent().parent().parent()
            .children('.promo-carousel-content').css({'display':'none'})
            .eq(id).css({'display':'block'});
    }
}
window.setTimeout(rotate, 400);

//css
.promo-carousel {display: block;} 
.content {display: none;}   
.content.first {display: block;}


//markup 
<div class="grid_4"> 
    <div class="promo-carousel"> 
        <div class="content first"> 
             //some content 
        </div> 
    </div> 
    <div class="promo-nav"> 
        <div> 
            <div class="prev"> 
                <a href="#"><span class="hide">previous</span></a> 
            </div> 
            <ul> 
                <li class="active"><a href="#"><span class="">first</span></a></li>
                <li><a href="#"><span class="">second</span></a></li>
                <li class="circle"><a href="#"><span class="">third</span></a></li>
                <li class="circle"><a href="#"><span class="">fourth</span></a></li>
            </ul>
            <div class="next"> 
                <a href="#" class=""><span class="hide">next</span></a>   
            </div>              
        </div>              
    </div>   
</div> 

Answer 1

你在找类似 this 的东西吗？ ？

$(document).ready(function() {
    $('.promo-nav').show();
    setInterval(rotate, 4000);

    function rotate() {
        var showid = 0;
        $('.promo-nav').find('li').each(function() {

            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                if ($(this).next().length == 0) {
                    id = $('.promo-nav').find('li:first-child').index();
                    $('.promo-nav').find('li:first-child').addClass('active');
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({
                        'display': 'none'
                    });
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({
                        'display': 'block'
                    });
                    return false;
                } else {
                    id = $(this).next().index();
                    $(this).next().addClass('active');
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({
                        'display': 'none'
                    });
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({
                        'display': 'block'
                    });
                    return false;
                }
            }
        });
    }

});