同一页面上具有相同 class 和 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

尝试这样的事情。这是对您所拥有内容的一些小调整：

$(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。希望对您有所帮助！

Answer 2

我的回答有点矫枉过正，但如果您查看上一个和下一个的事件侦听器，您会发现它们与您已经在做的非常相似。有点儿。一个建议是确保您通过重新显示第一个场景来捕捉 "I've gone PAST the next one" 场景。

我的其余回答是为了完整性。滑动控件是一个编程元素，因此我将它们从 HTML 本身中删除。我接受了一个包含图像元素集合的 div，并围绕它们创建了幻灯片结构。然后，在初始化所有幻灯片元素后，我创建事件侦听器。这种方法的优点是，我知道我将有一个下一个和上一个按钮，因为我已经创建了它们。我不依赖某人来确保他们记得将它们放入 HTML.

同样，您真正询问的唯一部分是事件侦听器（$(".nextBtn").on("click", function(){...} 部分。其余部分只是因为我是一个完美主义者。Ish。;)

$(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>

同一页面上具有相同 class 和 jquery 的多张幻灯片

multiple slideshow with same class on the same page and jquery

html

javascript

jquery

slideshow