在到達最后一張幻燈片后如何使滑塊回到第一張幻燈片，反之亦然

Question

我目前正在嘗試自學JavaScript，現在正在構建滑塊。 到目前為止，我已經設法弄清楚了如何使滑塊左右滑動。 到目前為止，我在問題上遇到的問題是，在到達最后一張幻燈片后如何使滑塊回到第一張幻燈片，反之亦然。

這是我一直在努力的代碼。

 $(document).ready(function() { var totalSlides = $('.slides li').length, slidesWidth = $('.slides li').width(), slideContainer = $('.slides'); slideCount = 0; slideItems = $('.slides li'); slideContainer.width(slidesWidth * totalSlides); $('.buttons .next').on('click', function() { nextSlide(); }); $('.buttons .prev').on('click', function() { prevSlide(); }); function nextSlide() { slideCount++; if (slideCount <= totalSlides) { slideCount++; console.log(slideCount); slideItems.animate({ left: '-=' + slidesWidth }, 200); } else if (slideCount === totalSlides) { slideCount = 0; slideItems.animate({ left: '+=' + slideContainer }, 200); } } function prevSlide() { if (totalSlides >= slideCount) { slideCount--; console.log(slideCount); slideItems.animate({ left: '+=' + slidesWidth }, 200); } } // function resetSlides() { // if ( slideCount === totalSlides ) { // slideCount = 0; // slideItems.animate({ // left: '+=' + slideContainer // }, 200); // } // } }) 

 .wrapper { max-width: 1440px; margin: 0 auto; } .timeline-container { max-width: 1440px; margin: 0 auto; position: relative; overflow: hidden; height: 300px; .slides { position: absolute; background-color: #ccc; width: 1440px; max-height: 300px; top: 0; left: 0; li { float: left; max-width: 1440px; width: 100%; height: 300px; position: relative; } } .buttons { position: absolute; top: 50%; left: 0; z-index: 10; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="timeline-container"> <ul class="slides"> <li> <div class="image"> </div> <div class="content"> 1965 </div> </li> <li> <div class="image"> </div> <div class="content"> 1968 </div> </li> <li> <div class="image"> </div> <div class="content"> 1969 </div> </li> </ul> <ul class="buttons"> <li class="prev">&lt;</li> <li class="next">&gt;</li> </ul> </div> </div> 

Answer 1

試試這個代碼

function gotoSlide(position){
if(position === 'first'){

    console.log(slideCount);
    slideItems.animate({
        left: '+=' + 0
    }, 200);
    slideCount=0;
}
else{
    console.log(slideCount);
    slideItems.animate({
        left: '+=' + slidesWidth*(totalSlides-1)
    }, 200);
    slideCount=totalSlides;
}
}

並在單擊按鈕時調用gotoSlide（yourPosition）。