Question

中发布的jquery滑块程序

请查看我的JS小提琴：

HTML code：

<div class="slider">
    <div class="news-item item-1">News item 1</div>
    <div class="news-item item-2">News item 2</div>
    <div class="news-item item-3">News item 3</div>
    <div class="news-item item-4">News item 4</div>
</div>
<button id="prev-item">Previous</button><button id="next-item">Next</button>

CSS：

.slider
    {
        position: relative;
        clear: both;
        width: 500px;
        height: 300px;
        overflow: hidden;
    }

.slider .news-item
    {
        width: 500px;
        height: 300px;
        position: absolute;
    }

.slider .item-1
    {
        left: 0;
    }

.slider .item-2
    {
        left: 500px;
    }

.slider .item-3
    {
        left: 1000px;
    }

.slider .item-4
    {
        left: 1500px;
    }

JavaScript的：

$( '#prev-item' ).click( function( event ) 
        {
            var animPrev = "+=500";
            if($( ".news-item" ).position().left=="0")
            {animPrev = "-=1500";}
            $( ".news-item" ).animate({
            left: animPrev,
        }, 1000, function() {
    });
});

$( '#next-item' ).click( function( event ) 
        {
            var animPos = "-=500";
            if($( ".news-item" ).position().left == "-1500")  
            {
                animPos = "+=1500";
            }
            $( ".news-item" ).animate({
                left: animPos,
            }, 1000, function() {
        });
    });

现在可以将幻灯片从结尾循环到开始，但是在Next或Prevoius按钮中单击几次后，幻灯片效果就不再起作用了。

有人可以帮我拿这个代码吗？

Answer 1

您应该以某种方式阻止点击队列，导致变量animPrev的一致性取决于它。因此，在预览和下一步之前，请点击检查是否使用此JQuery选择器进行动画处理：

if( $(".news-item").is(':animated') ) {
    return;
}

点击此选择器：http://api.jquery.com/animated-selector/

修正Fiddle

为可点击的jQuery滑块添加循环功能（2）

1 个答案: