jQuery單擊幻燈片點擊問題

我想創建圖像幻燈片使用jQuery。我有4張照片，一個上一個按鈕和一個下一個按鈕。上一個和下一個按鈕正在工作，他們正在移動圖像 - = 400px和+ = 400px。但是，我想當我在第一張照片時，用戶點擊上一個按鈕將他帶到最後一張照片，如果用戶在最後一張照片上，並點擊下一個按鈕將他帶到第一張照片。希望有人可以幫助解決問題jQuery單擊幻燈片點擊問題

謝謝。

HTML代碼：

<div class="images"> 
     <div class="images_inside"> 
      <img src="imgs/model_01.jpg"> 
      <img src="imgs/model_02.jpg"> 
      <img src="imgs/model_04.jpg"> 
      <img src="imgs/model_05.jpg"> 
     </div> 
    </div>

CSS代碼：

.images { 
    width:400px; 
    height:400px; 
    border:1px solid #000000; 
    overflow: hidden; 
} 

.images_inside { 
    width:1600px; 
    height:400px; 
} 

.images img { 
    width:400px; 
    height:400px; 
    float:left; 
}

jQuery代碼：

$(".next").on("click", function(){ 
    var $a = $(".images .images_inside").css("margin-left", "-=400px"); 
}); 

$(".prev").on("click", function(){ 
    var $b = $(".images .images_inside").css("margin-left", "+=400px"); 
});

來源

2016-04-15 NoName84

PS：我建議你使用CSS3轉換而不是'left'或'margin'屬性。它更快，更順暢。同樣在你的代碼中，沒有辦法做'var $ a'和'$ b'這些變量是不必要的。 –

是的，我可以刪除a和b變量。我只是把它們用於測試目的。 – NoName84

所涉及的數學很簡單，
計算tot數量的幻燈片，並使用counter

var $gallery = $(".images_inside"), 
 
    tot = $("> *", $gallery).length, 
 
    counter = 0; 
 

 
$(".prev, .next").on("click", function() { 
 

 
    // Increment/decrement the counter depending on the clicked button: 
 
    counter = $(this).hasClass("next") ? ++counter : --counter; 
 
    // Let's fix the counter loop 
 
    counter = counter<0 ? tot-1 : counter%tot; 
 

 
    // Finally ainmate your gallery using CSS! 
 
    $gallery.css({ 
 
     transition: "0.5s", 
 
     transform: "translateX(-"+ (100*counter) +"%)" 
 
    }); 
 

 
});

.images {overflow:hidden; white-space: nowrap; font-size:0;} 
 
.images_inside>* {width: 100%;display: inline-block; vertical-align:top;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div class="images_inside"> 
 
    <img src="//placehold.it/400x80/cf5?text=1"> 
 
    <img src="//placehold.it/400x80/f5c?text=2"> 
 
    <img src="//placehold.it/400x80/5ff?text=3"> 
 
    <img src="//placehold.it/400x80/fc5?text=4"> 
 
    </div> 
 
</div> 
 
<button class="prev">&larr;</button> 
 
<button class="next">&rarr;</button>

jsBin demo (compact code version)

來源

2016-04-15 14:59:51

一切正常。謝謝Roko – NoName84

@ NoName84很高興它的工作！快樂的編碼 –

，您可以撥打全球JS變量可以更新，讓你知道哪些圖片用戶當前處於打開狀態。然後在你的on click函數中查看這個變量，如果你在第一個圖像上並且你點擊了前一個，則以不同的方式更新空白以跳轉到最後一個圖像。最後一張圖像上的下一個按鈕也一樣。

來源

2016-04-15 14:32:01 Nived

感謝您的答覆Nived，但有可能輸入代碼嗎？ – NoName84

據我所知，你對jQuery非常新鮮。

即使您要使其工作，您嘗試實現此目標的方式也是錯誤的。

我建議你看看this website並使用一些jQuery插件。

該網站也有不同的例子如何實現它自己在底部。

來源

2016-04-15 14:43:17

@ NoName84，同樣使用https://jsfiddle.net/進行測試:) –

請問，這個問題是非常具體的（雖然有點寬泛？），但建議一個鏈接不是預期的格式，請你把一些小碼？使用prev-next動作循環圖像（計數器）有一個特別的妙用，很高興看到這個答案改進了！ –

感謝Gintas K的網站。我不想使用任何插件。我會檢查網站，看看是否有任何好的例子。 – NoName84

jQuery單擊幻燈片點擊問題

回答

相關問題