如何使多個項目滑塊在jQuery中無限重復

Question

因此，我有一個包含滑塊的畫廊。 我想使該滑塊無限循環，但是我似乎無法掌握它。 我是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();
});

這是HTML：

<div>
   <div id="MainDiv">
       <div id="mainpic">
       <img src="img/pic1.jpg" alt="London" id="MainImage" width="100%"/></div>
        <div id="child">
            <img id="Next" src="img/rightarrow.png" class="NextButton" style="height: 50px;"/>
            <img id="Previous" src="img/leftarrow.png" class="PreButton" style="height: 50px;"/>
        </div>
   </div>
   <div id="slider">
         <ul class="slides">
            <li class="slide">
                <img src="img/pic1.jpg" alt="London" width="200" height="120"/>
            </li>
            <li class="slide">
                <img src="img/pic2.jpg" alt="Florence" width="200" height="120"/>
            </li>
            <li class="slide">
                <img src="img/pic3.jpeg" alt="Amsterdam" width="200" height="120"/>
            </li>
            <li class="slide">
                <img src="img/pic4.jpg" alt="Venice" width="200" height="120"/>
            </li>
            <li class="slide">
                <img src="img/pic5.jpg" alt="Prague" width="200" height="120"/>
            </li>      
            <li class="slide">
                <img src="img/pic6.jpg" alt="Krakow" width="200" height="120"/>
            </li>  
            <li class="slide">
                <img src="img/pic7.jpg" alt="Vienna" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic8.jpg" alt="Szczecin" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic9.jpg" alt="Thassos" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic10.jpg" alt="Budapest" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic11.jpg" alt="Pisa" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic12.jpg" alt="Verona" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic13.jpg" alt="Ljubljana" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic14.jpg" alt="Bratislava" width="200" height="120"/>
            </li> 
            <li class="slide">
                <img src="img/pic15.jpg" alt="Zakopane" width="200" height="120"/>
            </li> 
        </ul>
   </div>
</div>

你會怎么做？

先感謝您！

Answer 1

為了使滑塊循環，請嘗試以下操作：

獲取最大幻燈片數量：

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

在您的時間間隔中，檢查currslides是否在最后一張幻燈片上（在CurrSlides += 1; ）。 如果是這樣，請將其重置為第一個：

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

為了使滑塊停止懸停，請在鼠標懸停時清除間隔： https : //api.jquery.com/mouseover/

首先給您的間隔函數起個名字：

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