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

我的回答有点矫枉过正，但是如果你看看上一个和下一个的事件听众，你会发现它们与你正在做的非常相似。的种类。一句建议是确保通过重新显示第一个来捕获“我已经过去了下一个”场景。

我的答案的其余部分是为了完整性。幻灯片控件是一个程序元素，因此我从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>

在同一页面和jquery上具有相同类的多个幻灯片

2 个答案: