圖片幻燈庫點擊活動

Question

我正在爲朋友創建網站，其中包括他在幻燈片中的一些最新的Instagram帖子。我已經爲用戶提供了左右光標，以便從圖像滑動到圖像，但是我無法實現最終目標 - 當用戶單擊右箭頭時，無論點擊多少次，它都會滑動圖像並繼續它。大約有8個圖像被包含在內。當我點擊左邊的光標時同樣適用。

滑塊沒有響應，因爲它應該。根據當前的代碼，當我點擊右箭頭時，它將顯示下一個圖像，直到它到達最後一個。然後，我在右箭頭點擊兩次，第一次沒有反應，環回和數組，而不是第一個

$(document).ready(function() { 
 
    $(".disciplines img").hover(function(){ 
 
    $(this).css("cursor", "pointer"); 
 
    }); 
 

 
    $(".disciplines").mouseenter(function(){ 
 
    $(this).find('h3').slideDown(); 
 
    }); 
 

 
    $(".disciplines").mouseleave(function(){ 
 
    $(this).find('h3').slideUp(); 
 
    }); 
 

 
    var sliderImages = []; 
 
    var counter = 0; 
 

 
    sliderImages[0] = "images/i1.png"; 
 
    sliderImages[1] = "images/i2.png"; 
 
    sliderImages[2] = "images/i3.png"; 
 

 
    $("#right-arrow").click(function(){ 
 
    counter++; 
 
    $(".active").attr("src", sliderImages[counter]); 
 

 
    if (counter > sliderImages.length) 
 
    { 
 
     counter = 0; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="instagram-feed"> 
 
    <div class="container"> 
 
    <h2>INSTAGRAM GALLERY</h2> 
 
    <div class="insta-gallery"> 
 
     <img src="images/left-arrow.png" class="arrow" id="left-arrow"> 
 
     <img src="images/i1.png" class="active"> 
 
     <img src="images/right-arrow.png" class="arrow" id="right-arrow"> 
 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</section>

Answer 1

您需要在帶來了第二圖像的第二次請確保您的比較是greater than or equal to使用>=，而不是隻有greater than（>）。

你的櫃檯就要高於3，因爲它沒算3爲理由，將計數器復位（因爲你的代碼表示計數器必須greater than的長度，也就是3）。這就是爲什麼它繼續而不是重新設置。

var sliderImages = []; 
 
var counter = 0; 
 

 
sliderImages[0] = "http://placehold.it/100x100"; 
 
sliderImages[1] = "http://placehold.it/200x100"; 
 
sliderImages[2] = "http://placehold.it/300x100"; 
 

 
$("#right-arrow").click(function(){ 
 

 
$(".active").attr("src", sliderImages[counter]); 
 
counter++; 
 
$('#count').text(counter); 
 
if (counter >= sliderImages.length) 
 
    { 
 
    counter = 0; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="instagram-feed"> 
 
    <div class="container"> 
 
    <h2>INSTAGRAM GALLERY</h2> 
 
    <div class="insta-gallery"> 
 
     <img src="http://placehold.it/50x50" class="arrow" id="left-arrow"> 
 
     <img src="http://placehold.it/150x100" class="active"> 
 
     <img src="http://placehold.it/50x50" class="arrow" id="right-arrow"> 
 
    </div> 
 
    <p id="count">0</p> 
 
    </div> 
 
    <div class="clear"></div> 
 
</section>