1

这段代码使“li”像我想要的那样移动，但是当我到达最后一个“li”并单击下一步时，它会继续移动，并且“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看一个例子

4

3 回答 3

2

这应该可以解决您的问题：

$(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')的当前 CSSright值以及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/

于 2013-10-01T23:14:39.567 回答
1

添加一个totalItems变量，表示轮播中的项目总数，以及一个currentItem变量，表示当前正在显示的项目的数量（即从 1 到 totalItems 的数字）。然后，只需检查它是否是最后一项，如果是，则将位置移回第一项。查看修改后的 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;
    }
});
于 2013-10-01T23:15:10.573 回答
1

看看这个小提琴的工作方法。对于右键单击。

基本上，每次单击“右”时，您都会测试比较项目行进的距离，并将其与基于项目总数允许的最大距离进行比较。

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);
    }
});
于 2013-10-01T23:18:18.707 回答