用相同的頁面和jQuery

Question

對同一類中的多個幻燈片下面的代碼是html代碼：

<div class="slide"> 
     <button class="next" name="next">Next</button> 
    <img src="../pic/09.jpg"/> 
    <img src="../pic/429716731_202913.jpg"/> 
    <img src="../pic/431701709_3813.jpg"/> 
    </div> 
    <div class="slide"> 
     <button class="next" name="next">Next</button> 
    <img src="../pic/09.jpg"/> 
    <img src="../pic/429716731_202913.jpg"/> 
    <img src="../pic/431701709_3813.jpg"/> 
    </div> 
    <div class="slide"> 
     <button class="next" name="next">Next</button> 
    <img src="../pic/09.jpg"/> 
    <img src="../pic/429716731_202913.jpg"/> 
    <img src="../pic/431701709_3813.jpg"/> 
    </div> 

下面的代碼是jquery代碼：

$(document).ready(function(){ 
      var slides = $(".slide img"); 
      slides.hide(); 
      var len = slides.length; 
      var current = 0; 
      slides.eq(current).show(); 
      $(".next").click(function(){ 
       slides.hide(); 
       slides.eq(current++).show(); 
      }); 
     }); 

當我點擊下一個剛剛第一個div顯示圖像不是其他。 我想爲其他divs.i工作，當我點擊下一個相同的div只是改變圖像在同一個div不all.please幫助我。

Answer 1

我的答案有點矯枉過正，但如果你看看prev和next的事件監聽器，你會發現它們與你已經做的非常相似。有點。建議的一句話就是確保你通過重新顯示第一張照片來捕捉「我已經過去了下一張」的情景。

我的答案的其餘部分是爲了完整性。幻燈片控件是一個編程元素，因此我將它們從HTML本身中刪除。我採用包含一系列圖像元素的div，並在其周圍創建幻燈片結構。然後，在所有的幻燈片元素都被初始化之後，我創建了事件監聽器。這種方法的優點是，我知道我會創建下一個和上一個按鈕，就像我創建它們一樣。我並不依賴某人來確保他們記得將它們放入HTML中。

再次，唯一的部分你真的問是事件偵聽器（在$(".nextBtn").on("click", function(){...}部分剩下的只是因爲我是個完美主義伊什;。）

$(document).ready(function() { 
 
    var slideShowEls = $(".slide"); 
 

 
    /*** 
 
    * this function will create all the slideshow 
 
    * functionality, given a div with a collection 
 
    * of image elements. 
 
    ***/ 
 
    var createSlideShow = function createSlideShow(elements) { 
 
    // first, we want to initialize the slideshow. 
 
    // this will mean moving the images into a container, 
 
    // and adding a div containing the slideshow controls. 
 
    $(elements).each(function() { 
 
     // Gather all images in this div. 
 
     var slideEls = $(this).children("img"); 
 
     
 
     // create two divs: one for controls and one for slides. 
 
     // The controls div will contain a prev and next button. 
 
     var slideControls = $("<div>").addClass("slideShowControls"); 
 
     var prevBtn = $("<button>") 
 
     .addClass("prevBtn") 
 
     .text("Prev"); 
 
     var nextBtn = $("<button>") 
 
     .addClass("nextBtn") 
 
     .text("Next"); 
 
     slideControls.append(prevBtn, [nextBtn]); 
 
     
 
     // The slides div will be the new home of the 
 
     // slide els from above. 
 
     var slideContents = $("<div>").addClass("slideContents"); 
 
     slideEls.detach(); 
 
     slideContents.append(slideEls); 
 
     slideEls.hide(); 
 
     slideEls.first().show(); 
 
     
 
     // both newly created divs are placed in the slideshow container. 
 
     $(this).append(slideControls, [slideContents]); 
 

 
    }) // End .each(), the initialization routine. 
 

 
    // Now, we need to create the listeners for the 
 
    // next and prev clicks. 
 
    $(".nextBtn").on("click", function() { 
 
     // We need to get the slides container... 
 
     var slidePane = $(this).parent().siblings(".slideContents"); 
 
     // ... hide the visible slide and show the next one. 
 
     slidePane.find("img:visible").hide() 
 
     .next().show(); 
 
     
 
     // If no slide is currently showing, there WAS no next one. 
 
     // Redisplay the first one. 
 
     if (!slidePane.find("img").is(":visible")) 
 
     slidePane.children("img").first().show(); 
 
    }); 
 

 
    $(".prevBtn").on("click", function() { 
 
     // We need to get the slides container... 
 
     var slidePane = $(this).parent().siblings(".slideContents"); 
 
     
 
     // ... hide the visible slide and show the previous one. 
 
     slidePane.find("img:visible").hide() 
 
     .prev().show(); 
 
     
 
     // If no slide is currently showing, there WAS no prev one. 
 
     // Redisplay the last one. 
 
     if (!slidePane.find("img").is(":visible")) 
 
     slidePane.children("img").last().show(); 
 
    }); 
 

 
    } 
 
    
 
    // Run the initialize routine for all slideshow divs. 
 
    // This will create the slideshow structure and implement and 
 
    // handle event listeners. 
 
    createSlideShow(slideShowEls); 
 

 
});

.slide { 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
} 
 

 
.slide img { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px dotted blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide"> 
 
    <img src="../pic/09.jpg" /> 
 
    <img src="../pic/429716731_202913.jpg" /> 
 
    <img src="../pic/431701709_3813.jpg" /> 
 
</div> 
 
<div class="slide"> 
 
    <img src="../pic/09.jpg" /> 
 
    <img src="../pic/429716731_202913.jpg" /> 
 
    <img src="../pic/431701709_3813.jpg" /> 
 
</div> 
 
<div class="slide"> 
 
    <img src="../pic/09.jpg" /> 
 
    <img src="../pic/429716731_202913.jpg" /> 
 
    <img src="../pic/431701709_3813.jpg" /> 
 
</div>

Answer 2

嘗試這樣的事情。這是幾個小的調整，你有什麼：

$(document).ready(function(){ 
    $(".slide img").hide(); 
    $(".slide").each(function() { 
     $(this).find("img:first").show(); 
    }); 
    $(".next").click(function() { 
     var currentImg = $(this).parent().find("img:visible"); 
     $(currentImg).hide(); 
     $(currentImg).next("img").show(); 
    }); 
}); 

而這裏的工作jsFiddle。希望能幫助到你！