使用“下 3 张图片”制作按钮

Question

我有 3 张图片，我想用 Previous , Next 制作一个按钮

当点击“下一步”按钮时，我希望这 3 张图片消失，另外 3 张新图片出现在同一位置。

我有这段代码，但我不知道该怎么做。 （现场版：vestigedayz.com/Arrow）

var slideIndex = 1;
showDivs(slideIndex);

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

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-red";
}

.mySlides {
  display: none
}

<div class="col-md-3">
  <div class="movie_img">
    <div class="grid_2">
      <a href="/seriale/Revolution">
        <img src="images/pic6.jpg" class="img-responsive" alt="">
      </a>
      <div class="caption1">
        <ul class="list_5 list_7">
          <li><i class="icon5"> </i>
            <p>6,7</p>
          </li>
        </ul>
        <i class="icon4 icon6 icon7"> </i>
        <p class="m_3">Revolution</p>
      </div>
    </div>
  </div>
  <div class="grid_2 col_1">
    <a href="/seriale/Almost-Human">
      <img src="images/pic2.jpg" class="img-responsive" alt="">
    </a>
    <div class="caption1">
      <ul class="list_3 list_7">
        <li><i class="icon5"> </i>
          <p>8.1</p>
        </li>
      </ul>
      <i class="icon4 icon7"> </i>
      <p class="m_3">Almost Human</p>
    </div>
  </div>
  <div class="grid_2 col_1">
    <a href="/seriale/Intelligence">
      <img src="images/pic9.jpg" class="img-responsive" alt="">
    </a>
    <div class="caption1">
      <ul class="list_3 list_7">
        <li><i class="icon5"> </i>
          <p>7,0</p>
        </li>
      </ul>
      <i class="icon4 icon7"> </i>
      <p class="m_3">Intelligence</p>
    </div>
  </div>


  <div class="w3-content">
    <img class="mySlides" src="images/pic2.jpg" style="width:100%">
    <img class="mySlides" src="images/pic9.jpg" style="width:100%">
    <img class="mySlides" src="images/pic6.jpg" style="width:100%">
  </div>

  <div class="w3-center">
    <div class="w3-section">
      <button class="w3-btn" onclick="plusDivs(-1)">❮ Anterior</button>
      <button class="w3-btn" onclick="plusDivs(1)">Ulterior ❯</button>
    </div>
  </div>



</div>

Answer 1

我已经简化了 html 结构来帮助您解决问题，并对 js 进行了更改。您将能够毫不费力地在当前的 html 结构上实现它。

var slideIndex = 0;

//	get html elements
  
var slidesEl = document.getElementById('thumbs');
var thumbs = slidesEl.getElementsByTagName('li');

showDivs(slideIndex);

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

function currentDiv(n) {
  showDivs(slideIndex = n);
}

document.getElementById('prevbutton').onclick = function() {
	slideIndex -= 3;
  if (slideIndex < 0) {
  	slideIndex = 0;
  }
  showDivs(slideIndex);
}

document.getElementById('nextbutton').onclick = function() {
	slideIndex += 3;
  //	make sure that last 3 thumbs are alwas displayed
  if (slideIndex >= (thumbs.length - 3)) {
  	slideIndex = thumbs.length - 3;
  }
  showDivs(slideIndex);
}

function showDivs(n) {
  
  //	first hide all thumbs

	for (var i=0; i<thumbs.length; i++) {
  	thumbs[i].style.display = 'none';
  }
  
  
  
  //	show 3 slides from current index slide
  for (var i=slideIndex; i<slideIndex+3; i++) {
  	thumbs[i].style.display = 'block';
  }
  
}

<ul id="thumbs">
<!-- first 3 divs (visible) -->
<li>
  <a href="/seriale/Revolution">
    <img src="http://i.imgur.com/5Qu0xhq.png" class="img-responsive" alt="">
  </a>
</li>
<li>
  <a href="/seriale/Almost-Human">
    <img src="http://i.imgur.com/uOhgArC.png" class="img-responsive" alt="">
  </a>
</li>
<li>
  <a href="/seriale/Intelligence">
      <img src="http://i.imgur.com/dVatFEs.png" class="img-responsive" alt="">
    </a>
</li>
<!-- next 3 divs (hidden) -->
<li style="display: none;">
  <a href="/seriale/Intelligence">
      <img src="http://i.imgur.com/dVatFEs.png" class="img-responsive" alt="">
    </a>
</li>
<li style="display: none;">
  <a href="/seriale/Revolution">
    <img src="http://i.imgur.com/5Qu0xhq.png" class="img-responsive" alt="">
  </a>
</li>
<li style="display: none;">
  <a href="/seriale/Almost-Human">
    <img src="http://i.imgur.com/uOhgArC.png" class="img-responsive" alt="">
  </a>
</li>
<!-- next 3 divs (hidden) -->
<li style="display: none;">
  <a href="/seriale/Almost-Human">
    <img src="http://i.imgur.com/uOhgArC.png" class="img-responsive" alt="">
  </a>
</li>
<li style="display: none;">
  <a href="/seriale/Revolution">
    <img src="http://i.imgur.com/5Qu0xhq.png" class="img-responsive" alt="">
  </a>
</li>
<li style="display: none;">
  <a href="/seriale/Intelligence">
      <img src="http://i.imgur.com/dVatFEs.png" class="img-responsive" alt="">
    </a>
</li>
</ul>
<div class="w3-center">
    <div class="w3-section">
      <button id="prevbutton" class="w3-btn">❮ Anterior</button>
      <button id="nextbutton" class="w3-btn">Ulterior ❯</button>
    </div>
  </div>