實施的jQuery的.next（）的一個簡單的圖像幻燈片

Question

的jsfiddle是在這裏：http://jsfiddle.net/qBQD4/

這很簡單真的;我想要右箭頭向前移動圖像，向左箭頭以簡單的幻燈片向後移動它們。我在頁面上運行了多個幻燈片，該代碼將在其上實現，因此爲什麼我已經使用.next（）路線而不是指定唯一的div ID。的HTML是：

<div class="media"> 
    <div class="slideButtons"> 
     <span class="prev"><</span> 
     <span class="next">/ ></span> 
    </div> 
    <ul class="gallery" id="olympGallery"> 
     <li><img src="http://i.imgur.com/8aA7W.jpg" alt="" title="" /></li> 
     <li><img src="http://i.imgur.com/jE7vj.jpg" alt="" title="" /></li> 
     <li><img src="http://i.imgur.com/L7lVg.jpg" alt="" /></li> 
    </ul> 
</div> 

而jQuery代碼是：

var speed = 100; 

$(".prev").click(function() { 
    var now = $(this).next("ul.gallery").children(":visible"), 
     last = $(this).next("ul.gallery").children(":last"), 
     prev = now.prev(); 
     prev = prev.index() == -1 ? last : prev; 
    now.fadeOut(speed, function() {prev.fadeIn(speed);}); 
}); 

$(".next").click(function() { 
    var now = $(this).next("ul.gallery").children(':visible'), 
     first = $(this).next("ul.gallery").children(':first'), 
     next = now.next(); 
     next = next.index() == -1 ? first : next; 
    now.fadeOut(speed, function() {next.fadeIn(speed);}); 
}); 

$(".gallery li").click(function() { 
    var first = $(this).parent().children(':first'), 
     next = $(this).next(); 
     next = next.index() == -1 ? first : next; 
    $(this).fadeOut(speed, function() {next.fadeIn(speed);}); 
});  

最後，有點CSS的：

.prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer; 
} 

.gallery li{display:none; list-style:none;} 
.gallery li:first-child {display:block;} 

.gallery img { 
    max-height:550px 
} 

第三屆功能工作正常（點擊圖片進行到系列中的下一個）。但是，前兩個是完全破碎的。我在這裏做錯了什麼？

Answer 1

在你忘了升入點擊div的父prev和next函數試圖找到其相關的畫廊之前，即：

var now = $(this).parent().next("ul.gallery").children(":visible") 

工作樣品在http://jsfiddle.net/alnitak/qBQD4/1/

FWIW，你應該也真的分開了那一步到一個單獨的變量，然後找到相關圖片：

var gallery = $(this).parent().next("ul.gallery"); 
var first = gallery.children(':first'); 

Answer 2

當您使用的.next（選擇器），您正在尋找匹配選擇器的下一個兄弟。 換句話說，您正在查找DOM樹中同一級別的下一個元素。

以下是更正後的jsfiddle：http://jsfiddle.net/QALEE/

所有你需要的是使用$（本）.parent（）下一個（「ul.gallery」）是在良好的水平，選擇下一個「UL .gallery「元素。

Answer 3

寫在20分鐘..可能有一些非官方的代碼行，但工作正常。 JS

 $(document).ready(function() { 

     var currentBox=0; 

     $("#Right").click(function() { 

      var tobox = $(".mainbox").length; 
      if(currentBox<tobox-1){ 
      if (currentBox == 0) 
      { 
       //if the first slide 
       $(".mainbox:nth(0)").hide(); 
       $(".mainbox:nth(1)").show(); 
       currentBox = currentBox + 1; 
       //alert("to right:" + tobox +currentBox) ; 
      } 
      else { 

       currentBox = currentBox + 1; 
       var h = currentBox - 1; 
       var s = currentBox; 
       $(".mainbox:nth(" + h + ")").hide(); 
       $(".mainbox:nth(" + s + ")").show(); 

       //alert("to right:" + tobox + currentBox); 

      } 
      } else { 
       $(".mainbox:nth(0)").show(); 
       var a = tobox - 1; 
       $(".mainbox:nth(" + a + ")").hide(); 
       currentBox = 0; 
       //alert("end"); 
      } 


     }); 

     $("#Left").click(function() { 



       var tobox = $(".mainbox").length; 
       if (currentBox == 0) 
       {//if the last slide 

        var a = tobox - 1; 
        $(".mainbox:nth(" + a + ")").show(); 
        $(".mainbox:nth(0)").hide(); 
        currentBox = a; 
        // alert("to left:" + tobox +currentBox) ; 
       } 
       else 
       { 
        // alert("Current box:"+ currentBox); 
        // 
        var h = currentBox; 
        var s = currentBox-1; 
        $(".mainbox:nth(" +h+ ")").hide(); 
        $(".mainbox:nth(" + s + ")").show(); 

        // alert("to right:" + tobox + currentBox); 
        currentBox = currentBox - 1; 

       } 
      //else { alert("end"); } 


      }); 
     }); 


</script> 

HTML

<div class="sliderOutbx"> 

    <div class="Content"> 
     <div class="NavLeft"><span id="Left">Left</span></div> 

     <div class="mainbox"> 
      <div class="box">1</div> 
      <div class="box">2</div> 
     </div> 
     <div class="mainbox" style="display:none;"> 
      <div class="box">3</div> 
      <div class="box">4</div> 
     </div> 
     <div class="mainbox" style="display:none;"> 
      <div class="box">5</div> 
      <div class="box">6</div> 
     </div> 

     <div class="NavRight"><span id="Right">Right</span></div> 
    </div> 

</div> 

希望這可以幫助的人每天節省。