Question

此代码使'li'移动，就像我想要的那样，但是当我到达最后一个'li'并单击next时它继续移动并且'li'移出用户视图。我想知道如何循环它，以便第一个'li'再次出现。

<script type="text/javascript">
    $(document).ready(function() {          
        $('#right').click(function() {
            $('.carousel-inner li').animate({
                right: '+=292px'
                }, 500);
        });
        $('#left').click(function() {
            $('.carousel-inner li').animate({
                right: '-=292px'
                }, 500);
        });     
    });
</script>

这是一个Fiddle来查看示例

Answer 1

这可以解决您的问题：

$(document).ready(function () {
    var inner = $('.carousel-inner'),
        slides = inner.find('li'),
        width = slides.eq(0).outerWidth(true),
        max = (width * slides.length) - width;

    $('#right, #left').on('click', function () {
        var currRight = parseInt(inner.css('right'), 10), move;
        if (this.id === 'right') {
            move = currRight === max ? 0 : currRight+width;
        } else {
            move = currRight === 0 ? max : currRight-width;
        }
        inner.animate({ right: move }, 500);
    });
});

前四行缓存元素并设置一些基本变量，例如可以使用的最大right值和幻灯片的width。

然后我将click事件合并以避免重复。 click事件的第一行将currRight定义为$('.carousel-inner')当前的CSS right值以及稍后使用的move。

if (this.id === 'right'){ /* #right */ }else{ /* #left */ }检查点击元素的id是right还是left。 if语句中的代码只是检查滑块是零（开头）还是最大（结束），然后将move变量设置为正确的值。

这里有效：http://jsfiddle.net/mFxcq/10/

更新：要在定时器上移动幻灯片，请在附加点击事件后添加此内容：

function setTimer(){
    clearTimeout(window.slideTimer);
    window.slideTimer = setTimeout(function(){ $('#right').trigger('click'); }, 5000);
};

setTimer();

然后在setTimer();之后添加inner.animate({ right: move }, 500);，一切都会按预期工作。

这里有效：http://jsfiddle.net/mFxcq/14/

Answer 2

添加一个totalItems变量，它代表转盘中的项目总数，以及一个currentItem变量，它代表当前项目的显示数量（即1到totalItems的数字））。然后，只需检查它是否是最后一项，如果是，则将位置移回第一项。查看revised fiddle，它可以在两个方向上工作。这是JavaScript的示例，为了清楚起见，所有内容都已写出来。

var totalItems = $('.carousel-inner li').length;
var currentItem = 1;

$('#right').click(function () {
    if (currentItem === totalItems) {
        // We've reached the end -- go to the beginning again
        $('.carousel-inner li').animate({
            right: '-=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = 1;
    } else {
        $('.carousel-inner li').animate({
            right: '+=292px'
        }, 500);
        currentItem += 1;
    }
});
$('#left').click(function () {
    if (currentItem === 1) {
        // We're at the beginning -- loop back to the end
        $('.carousel-inner li').animate({
            right: '+=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = totalItems;
    } else {
        $('.carousel-inner li').animate({
            right: '-=292px'
        }, 500);
        currentItem -= 1;
    }
});

Answer 3

看看这个fiddle的工作方法。右键单击。

基本上，每次点击“右”时，您都会测试比较物品的行进距离，并根据物品总数将其与允许的最大距离进行比较。

var slideWidth = 292;    
$('#right').click(function() {
    if(parseInt($('.carousel-inner li').css('right')) == slideWidth*($('.carousel-inner li').length-1)) {
        $('.carousel-inner li').animate({
            right: '0px'
    , 500);
    }
    else {
        $('.carousel-inner li').animate({
            right: '+=' + slideWidth + 'px'
        }, 500);
    }
});

如何添加if语句来循环图像？

3 个答案: