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

这段代码使“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>

$（文档）.ready（函数（）{
$（'#right'）。单击（函数（）{
$（'.carousel-inner-li'）。设置动画({
右：'+=292px'
}, 500);
});
$（'#左'）。单击（函数（）{
$（'.carousel-inner-li'）。设置动画({
右：'-=292px'
}, 500);
});     
});

---

下面是一个示例

这将解决您的问题：

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

前四行缓存元素并设置一些基本变量，如可使用的max

right

值和幻灯片的

宽度

然后，我组合了
单击
事件以避免重复。单击事件的第一行将
currRight
定义为
$（'.carousel-inner'）
的当前CSS
right
值以及以后使用的
move

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

这就是它的工作原理：

更新：要使幻灯片在计时器上移动，请在附加单击事件后添加此项：

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

setTimer();

然后添加
setTimer（）紧跟在
internal.animate（{right:move}，500）之后一切都将按预期工作

它正在工作：
这应该可以解决您的问题：

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

前四行缓存元素并设置一些基本变量，如可使用的max
right
值和幻灯片的
宽度

然后，我组合了
单击
事件以避免重复。单击事件的第一行将
currRight
定义为
$（'.carousel-inner'）
的当前CSS
right
值以及以后使用的
move

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

这就是它的工作原理：

更新：要使幻灯片在计时器上移动，请在附加单击事件后添加此项：

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

setTimer();

然后添加
setTimer（）紧跟在
internal.animate（{right:move}，500）之后一切都将按预期工作

它正在工作：
添加一个
totalItems
变量，该变量将表示旋转木马中的项目总数，以及一个
currentItem
变量，该变量将表示正在显示的当前项目数（即从1到totalItems的数字）。然后，只需检查它是否是最后一项，如果是，则将位置移回第一项。请查看，它在两个方向都起作用。下面是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;
    }
});

添加一个
totalItems
变量，该变量将表示转盘中的项目总数；添加一个
currentItem
变量，该变量将表示当前显示项目的数量（即从1到totalItems的数字）。然后，只需检查它是否是最后一项，如果是，则将位置移回第一项。请查看，它在两个方向都起作用。下面是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;
    }
});

看看这是一个有效的方法。对于右键单击

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

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

看看这是一个有效的方法。对于右键单击

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

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

您将需要检查当前活动的索引，并查看左侧或右侧有多少索引，尽管这里您正在手动计算px。检查前一个SO线程的类似答案-它看起来更通用。您需要检查当前活动线程的索引，并查看左侧或右侧有多少，尽管这里您是手动计算px。检查前一个SO线程中的类似答案-它看起来更通用。正确。如果你读了我的答案，我只更新了“正确的”。OP在“左”方向进行更改非常简单。关键是他有一个“正确”的工作样本。如果你读了我的答案，我只更新了“正确的”。OP在“左”方向进行更改非常简单。关键是他有一个“正确”的工作样本，可以用来工作。谢谢。如何设置计时器，使其能够自行移动。我有setTimeout，但它只移动前2个“li”。我会使用
setInterval
这样它就会重复。是的，我收到了，谢谢。读取.hover（）clearInterval和onMouseout setInterval。努力学习尽可能多的东西，谢谢你们在stackoverflow的帮助，让我更容易学习，哈哈，谢谢。如何设置计时器，使其能够自行移动。我有setTimeout，但它只移动前2个“li”。我会使用
setInterval
这样它就会重复。是的，我收到了，谢谢。读取.hover（）clearInterval和onMouseout setInterval。多亏了你们，我尽可能多地学习