将滑块的下一张和上一张按钮更改为下一张或上一张图片的预览

Question

嘿，我有一个滑块，我需要更改下一张和上一张按钮的背景以显示下一张和上一张幻灯片的预览。我不知道如果没有 jQuery 是否可行，但由于我正在研究所有 javascript 滑块，我非常感谢 javascript 解决方案

这是HTML

<body onload="Load()"
  <div class="container">
    <div class="slider">
      <div class="slides" id="slide1">
        <img src="img/1.jpg">
      </div>
      <div class="slides" id="slide2">
        <img src="img/2.jpg">
      </div>
      <div class="slides" id="slide3">
        <img src="img/3.jpg">
      </div>
    </div>
    <div class="ctrl">
      <div class="prev">
        <input type="button" onClick="prev();">
      </div>
      <div class="next">
        <input type="button" onClick="next();">
      </div>
    </div>
  </div>
</body>

和 Javascript

  nrSlide=3;
  function Load(){
    nrShown = 0;
    vect = new Array(nrSlide + 1);
    vect[0] = document.getElementById("slide1");
    vect[0].style.visibility = "visible";
    for (var i = 1; i < nrSlide; i++)
    {
      vect[i] = document.getElementById("slide" + (i+1));
    }
  }
  function next(){
    nrShown++;
    if(nrShown == nrSlide) {
      nrShown=0;
    }
    Effect();
  }
  function prev(){
    nrShown--;
    if(nrShown == -1) {
      nrShown = nrSlide -1;
    }
    Effect();
  }
  // Effect
  function Effect(){
    for (var i=0; i < nrSlide; i++){
      vect[i].style.opacity = "0";
      vect[i].style.visibility = "hidden";
    }
    vect[nrShown].style.opacity = "1";
    vect[nrShown].style.visibility = "visible";
  }

PS：我确实意识到这在 jQuery 中是可行的，但我需要一个 javascript 解决方案。如果你要投反对票，至少留下一个理由

Answer 1

 nrSlide=3;
  function Load(){
 nrShown = 0;
 vect = new Array(nrSlide + 1);
 vect[0] = document.getElementById("slide1");
 vect[0].style.visibility = "visible";
 for (var i = 1; i < nrSlide; i++)
 {
   vect[i] = document.getElementById("slide" + (i+1));
 }
                ShowNextPrev(nrShown);
  }
  function next(){
 nrShown++;
 if(nrShown == nrSlide) {
   nrShown=0;
 }
 ShowNextPrev(nrShown);
 Effect();
  }
  function prev(){
  
 nrShown--;
 if(nrShown == -1) {
   nrShown = nrSlide -1;
 }

 ShowNextPrev(nrShown);
 Effect();
  }
  
  function ShowNextPrev(nrShown)
  {

 var nrShown2 = nrShown == nrSlide-1 ? -1 : nrShown;
 
 document.querySelector(".next").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown2+1].src+")";
 document.querySelector(".next").querySelector("input").style.backgroundSize = "contain";   
  
 var nrShown3 = nrShown == 0 ? nrSlide : nrShown;
 document.querySelector(".prev").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown3-1].src+")";
 document.querySelector(".prev").querySelector("input").style.backgroundSize = "contain";   
  }
  
  // Effect
  function Effect(){
 for (var i=0; i < nrSlide; i++){
   vect[i].style.opacity = "0";
   vect[i].style.visibility = "hidden";
 }
 vect[nrShown].style.opacity = "1";
 vect[nrShown].style.visibility = "visible";
 
  }

  Load();

.ctrl > div {
  display: inline-block;
}

.slides > img {
  height: 40px;
}

<div class="slider">
  <div class="ctrl">
    <div class="prev">
      <input type="button" onClick="prev();">
    </div>
    <div class="next">
      <input type="button" onClick="next();">
    </div>
  </div>
  <div class="slides" id="slide1">
    <img src="https://lh6.googleusercontent.com/-Ze9FLpwZjdE/AAAAAAAAAAI/AAAAAAAAAA8/YOtXVkTZpNs/photo.jpg">
  </div>
  <div class="slides" id="slide2">
    <img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-green-icon.png">
  </div>
  <div class="slides" id="slide3">
    <img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-black-icon.png">
  </div>
</div>


</div>

这种方法应该可以做到。在普通 JavaScript 中使用 querySelector() 和 querySelectorAll。你只需要代码。 CSS 和 HTML 只是被修改以使其适用于该示例。

将滑块的下一张和上一张按钮更改为下一张或上一张图片的预览

Change slider's next and previous button to be previews of upcoming or previous pictures

html

javascript

slider