图像幻灯片与另一个div冲突

Question

我的代码工作正常，但只是如果我添加多个div，例如 当我加载页面时，第一个div专辑播放图像，第二个专辑消失，但当第一个div专辑图像到达最后一个图像时，滑块开始在第二个div专辑中播放。希望我不要混淆？

请看看小提琴到底发生了什么

Fiddle Demo

<div class="imgslide">
  <div style="display: inline-block;">
    <img src="images/room1.jpg" />
  </div>
  <div>
    <img src="images/room2.jpg" />
  </div>
  <div>
    <img src="images/room3.jpg" />
  </div>
  <div>
    <img src="images/room4.jpg" />
  </div>
  <div>
    <img src="images/room5.jpg" />
  </div>
  <div>
    <img src="images/room6.jpg" />
  </div>
</div>

Answer 1

您需要遍历每个相册并将功能附加到它们，如

＆＃13;

＆＃13;

$(function() {
  $('.albums').each(function() {

    var currentIndex = 0,
      $album = $(this),
      items = $('.imgslide div', this),
      itemAmt = items.length;

    function cycleItems() {
      var item = $('.imgslide div', $album).eq(currentIndex);
      items.hide();
      item.css('display', 'inline-block');
    }

    var autoSlide = setInterval(function() {
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    }, 2000);

    $('.next', this).click(function(e) {
      e.preventDefault();
      clearInterval(autoSlide);
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    });

    $('.prev', this).click(function(e) {
      e.preventDefault();
      clearInterval(autoSlide);
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      cycleItems();
    });
  });
});

＆＃13;

.albums {
  position: relative;
}
.imgslide {
  max-width: 400px;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.imgslide div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.imgslide img {
  width: 100%;
  height: auto;
}
.prev,
.next {
  position: absolute;
  top: 50px;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  z-index: 2;
}
.next {
  right: 1px;
  border-right: 3px solid #DC6242;
}
.prev {
  left: 1px;
  border-left: 3px solid #DC6242;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The albums are dynamically generated and im just trying to slide the thumb images but something is just not ok -->

<div class="albums">
  <h2>Album Name: <?php echo $albumname; ?> </h2>
  <div class="imgslide">
    <div style="display: inline-block;">
      <img src="http://pawmax.com/wp-content/uploads/2011/08/2dogs1.jpg" />
    </div>
    <div>
      <img src="http://www.eastcountymagazine.org/sites/eastcountymagazine.org/files/dog%20show2.jpg" />
    </div>
    <div>
      <img src="http://wpelegacy.redfm.ie/2013/07/dogs2-e1373638129723-200x100.jpg" />
    </div>
    <div>
      <img src="http://www.wired.com/wp-content/uploads/2014/11/hipster-dogs-ft-200x100.jpg" />
    </div>
  </div>
  <a href="#" class="next">&raquo;</a>
  <a href="#" class="prev">&laquo;</a>
</div>

<!-- Second Albim in same page -->

<div class="albums">
  <h2>Album Name: <?php echo $albumname; ?> </h2>
  <div class="imgslide">
    <div style="display: inline-block;">
      <img src="http://pawmax.com/wp-content/uploads/2011/08/2dogs1.jpg" />
    </div>
    <div>
      <img src="http://www.eastcountymagazine.org/sites/eastcountymagazine.org/files/dog%20show2.jpg" />
    </div>
    <div>
      <img src="http://wpelegacy.redfm.ie/2013/07/dogs2-e1373638129723-200x100.jpg" />
    </div>
    <div>
      <img src="http://www.wired.com/wp-content/uploads/2014/11/hipster-dogs-ft-200x100.jpg" />
    </div>
  </div>
  <a href="#" class="next">&raquo;</a>
  <a href="#" class="prev">&laquo;</a>
</div>

＆＃13;

＆＃13;

＆＃13;