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;
                }
            }
        });
    }

});

Answer 2

如果您已有下一个按钮，为什么不使用

window.setInterval(function() {
    $('.promo-nav .next').click();
}, 4000);

这假设下一个按钮将自动循环回到开头。

如何自动化旋转木马

2 个答案: