Javascript 如何在jquery中无限重复多个项目滑块

所以，我有这个画廊，其中包括一个滑块。我想使滑块无限循环，但我似乎无法掌握它的窍门。我是jQuery的初学者。我不想使用Slick，我已经意识到它的存在。我希望图像不断重复，并且当我在上面悬停时滑块停止移动。但我尝试的一切似乎都不起作用。代码如下：

function set_body_height() { 

}
$(document).ready(function () {

var thumbnail_array = $(".slides img").map(function () {
    return $(this).attr("src");
}).get();

$('#MainImage').attr('src', thumbnail_array[0]); 
$('#Previous').css("visibility", "hidden");

var lengthImages = thumbnail_array.length;
var CurrImage = 0;
var widthImg = 210;
var BottomLength = 1;
var IndexDiff;

$('.slides li img').click(function () {
    var Imagesrc = $(this).attr('src');
    var ImageIndex = $(this).parent('.slide').index();

    $('#MainImage').fadeOut('slow', function () {
        if (ImageIndex <= lengthImages - BottomLength) {
            IndexDiff = CurrImage;
            CurrImage = ImageIndex;
            IndexDiff = Math.abs(IndexDiff - CurrImage);
            $('#slider .slides').animate({ 'margin-left': '-=' + widthImg * IndexDiff }, 4000);
            $('#MainImage').attr('src', Imagesrc);

            if (ImageIndex != 0) {
                if ($('#Previous').css("visibility") == "hidden") {
                    $('#Previous').css("visibility", "visible");
                }
            }
            if (ImageIndex == lengthImages - BottomLength) {
                if ($('#Next').css("visibility") == "visible") {
                    $('#Next').css("visibility", "hidden");
                }
            }
        }
        else {
            $('#MainImage').attr('src', Imagesrc);
        }
        }).fadeIn(3000);            
});
$('#Next').click(function () {

        $('#MainImage').fadeOut('slow', function () {
            CurrImage = CurrImage + 1; 
            if (CurrImage <= lengthImages - BottomLength) {
                $('#slider .slides').animate({ 'margin-left': '-=' + widthImg }, 000);
            }
            $('#MainImage').attr('src', thumbnail_array[CurrImage]);
            if (CurrImage == lengthImages - BottomLength) {
                $('#Next').css("visibility", "hidden");
            }
            if ($('#Previous').css("visibility") == "hidden") {  
                $('#Previous').css("visibility", "visible");
            }
        }).fadeIn(3000);
        $('.slides li:last').after($('.slides li:first'));
});
$('#Previous').click(function () {
    $('#MainImage').fadeOut('slow', function () {
        CurrImage = CurrImage - 1;
        $('#slider .slides').animate({ 'margin-left': '+=' + widthImg }, 4000);
        $('#MainImage').attr('src', thumbnail_array[CurrImage]);
        if (CurrImage == 0) {
            $('#Previous').css("visibility", "hidden");
        }
        if ($('#Next').css("visibility") == "hidden") {
            $('#Next').css("visibility", "visible");
        }
        $('.slides li:first').after($('.slides li:last'));
    }).fadeIn(1000);
});


$('.slides li img').hover(function () {
    $(this).css('cursor', 'pointer');
    $(this).css({ 'filter': 'alpha(opacity=50)', 'opacity': '0.5' });


}, function () {
    $(this).css('cursor', 'none');
    $(this).css({ 'filter': 'alpha(opacity=100)', 'opacity': '1' });

});



var CurrSlides = 0;

setInterval(function () {
    $('#slider .slides').animate({ 'margin-left': '-=210' }, 10000,
        function () {
            CurrSlides += 1;
            if (CurrSlides === thumbnail_array.length-2) {
                $('#slider .slides').css('margin-left', '630');
            }
        });

}, 3000);

//the images don't go over the slider    
function set_body_height() {
    $('#mainpic img').height($(window).height());
}
$(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
});

函数集\u body\u height（）{
}
$（文档）.ready（函数（）{
变量缩略图数组=$（“.slides img”）.map（函数（）{
返回$（this.attr（“src”）；
}).get（）；
$（'#main image'）.attr（'src'，缩略图数组[0]）；
$（'#Previous'）.css（“可见性”、“隐藏”）；
var lengthImages=缩略图_array.length；
var-CurrImage=0；
var宽度img=210；
var-BottomLength=1；
var IndexDiff；
$（'.slides li img'）。单击（函数（）{
var Imagesrc=$（this.attr（'src'）；
var ImageIndex=$（this.parent（'.slide'）.index（）；
$（'main image'）。淡出（'slow'，函数（）{
如果（ImageIndex要使滑块循环，请尝试以下操作：

获取最大幻灯片编号：

var allslides = $('.slides li').length;

在您的时间间隔内，检查currslides是否在最后一张幻灯片上（在
currslides+=1；
行上）。如果在最后一张幻灯片上，请将其重置为第一张：

if (CurrSlides == allslides) currslides = 0
else CurrSlides += 1;

要使滑块在悬停时停止，请清除鼠标悬停时的间隔：

$( ".slide" ).mouseover(function() {
 clearInterval(myinterval );
});

首先为间隔函数指定一个名称：

myintervalfunction = function() {
   $('#slider .slides').animate({ 'margin-left': '-=210' }, 10000,
    function () {
        CurrSlides += 1;
        if (CurrSlides === thumbnail_array.length-2) {
            $('#slider .slides').css('margin-left', '630');
        }
    });
}

开始时间间隔：

 setInterval( myinterval , 3000);

鼠标悬停：

$( ".slide" ).mouseover(function() {
 clearInterval(myinterval );
});

在mouseleave上重新启动：

$( ".slide" ).mouseleave(function() {
  setInterval( myintervalfunction , 3000);
});

它是否适用于
$（'.slides li:first child'）
和
$（'.slides li:last child'）
？如果有效，我还没有找到正确的方法来使用它们：（你的确切意思是哪一部分？鼠标盖不是。与中一样，不是滑块只移动一次，直到它遇到滑块中的第二个图像，然后完全停止。@Carmen Maria，我认为它可能与间隔有关，你需要调整上面的代码示例（函数名等）。请参阅w3c参考了解间隔：