addClass .next（）.prev（）幻燈片不會工作

我想用jQuery製作一個幻燈片。第一個問題：如果我只有「下一個點擊功能」，圖像會依次正確顯示。但是，如果我使用「prev」功能，下一個按鈕將不再工作。另一個問題：通過點擊最後一張圖像後面的「下一個按鈕」，幻燈片將從第一張圖像重新開始。也許有人有一個想法。提前致謝。addClass .next（）.prev（）幻燈片不會工作

  $("#next").click(function(){ 
      if($("#gallery li").next("#gallery li").length != 0) { 
       var next = $(".toppicture").parent("li").next().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(next).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     }); 

     $("#prev").click(function(){ 
      if($("#gallery li").prev("#gallery li").length != 0) { 
       var prev = $(".toppicture").parent("li").prev().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(prev).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     });

的「UL」 id爲「畫廊」是這樣的：

<li> 
<img class="toppicture" src="images/w1.jpg" title="Title #0"/> 
    </li> 
    <li> 
<img src="images/w2.jpg" title="Title #1"/> 
    </li> 
    <li> 
<img src="images/w3.jpg" title="Title #2"/> 
    </li>

來源

2012-02-19 D.Steinel

這不是最簡單的滑塊，但我認爲這是最容易理解的。 jsFiddle

HTML：

<ul id="gallery"> 
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li> 
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li> 
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li> 
</ul> 
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a>

JS：

function loadSlide(index){ 
    $('#gallery li').hide() 
     .eq(index).show(); 
} 

$('#gallery').data('index',0).find('li').hide(); 
loadSlide(0); 

$('#next').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + 1) % numSlides;  
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault();    
}); 
$('#previous').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + numSlides - 1) % numSlides; 
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault(); 
});

它通過分離作用避免了大量的遍歷（如您.next()慘敗）的。

幻燈片更改是由函數完成的，它需要一個數字並顯示該幻燈片。
當前幻燈片編號存儲使用.data()
下一個和上一個按鈕就必須得到當前幻燈片和減量或者增量，這個數字正確，然後調用幻燈片換畫廊本身。

這樣您就可以輕鬆地在任何特定區域展開。想要過渡嗎？把它放在幻燈片切換器中。想要幻燈片自動推進？設置一個計時器來調用幻燈片更換器。

將此解決方案與全功能滑塊分離的唯一方法是通常將所有內容封裝在一起，並使用自定義事件而非函數來更改幻燈片。如果您願意，我會很高興將這個例子擴展一下，以展示您的不同之處。

來源

2012-02-20 00:07:23 Sinetheta

非常感謝！非常好的腳本！正是我需要的。唯一的問題是，圖像不完全在同一條線上。看起來這是一個「列表式」的問題。當我切換到下一張圖像時，下一張圖像向右多了一點。是否有任何把每個圖像保持在同一行的技巧？ – 2012-02-20 01:08:12

list-style：none;並顯示：block;在您的網站上或在該小提琴上不起作用 – 2012-02-20 01:30:24

？如果你鏈接到你的網站，我可以幫你調試css – Sinetheta 2012-02-20 02:08:19

這裏的example in jsFiddle你

所以，你想要的是像一個旋轉木馬。有一些jQuery插件來處理這個效果，就像這樣：jCarousel by Sorgalla.com

來源

2012-02-20 00:17:20

非常感謝您的幫助，但這並不是我正在尋找的。 – 2012-02-20 01:18:45

addClass .next（）.prev（）幻燈片不會工作

回答

相關問題