幻灯片导航按钮在多张幻灯片上工作，如何仅将其寻址到 div 内的一个？

Question

我面临的问题是，如果我在一个页面上放置多张此类幻灯片，则所有幻灯片的导航按钮将仅在侧面的最后一个画廊上起作用。 我尝试对每个按钮下达特定命令，但到目前为止我所有的方法都失败了。 目标是每张幻灯片只能通过其自己的左/右按钮进行导航。 我希望必须有一个非常简单的解决方案，我只是不太了解java来获得它。 非常感谢您的帮助！

<div class="box">
	  <div class="rb-style pile">
      <div class="col-md-6">
        <h3>SLIDE ONE</h3>
        <p>TEXT</p>
      </div>

      <div class="col-md-6 rb-slider">

      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>

	  <button class="rb-btn rb-left" onclick="plusDivs(-1)">&#10094;</button>
      <button class="rb-btn rb-right" onclick="plusDivs(1)">&#10095;</button>
    </div>
  </div>

	<div class="rb-style pile">
      <div class="col-md-6">
        <h3>SLIDE ONE</h3>
        <p>TEXT</p>
      </div>

      <div class="col-md-6 rb-slider">

      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>

	  <button class="rb-btn rb-left" onclick="plusDivs(-1)">&#10094;</button>
      <button class="rb-btn rb-right" onclick="plusDivs(1)">&#10095;</button>
    </div>
  </div>
  
 </div>

Java：

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("rbSlide");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
} </script>

Answer 1

使用这个.. html img 标签必须包含在具有特定 id 的 div 中。 像这样：

<div id="specific_id">
    <img >
    <img>.....
</div>

然后添加javascript....

var slideShow = function(container) {
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
    this.images.push(container.children[i]);
    this.images[i].style.display = "none";
}

// Handle going to to the next slide
var nextSlide = function() {
    for (var i = 0; i < this.images.length; i++) {
        this.images[i].style.display = "none";
    }
    this.images[this.curImage].style.display = "block";
    this.curImage++;
    if (this.curImage >= this.images.length) {
        this.curImage = 0;
    }
    window.setTimeout(nextSlide.bind(this), 1000);
};

nextSlide.call(this);
};

然后用特定的 id 调用它：

slideShow(document.getElementById("slideshow"));