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

＆＃13;

 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();

＆＃13;

.ctrl > div {
  display: inline-block;
}

.slides > img {
  height: 40px;
}

＆＃13;

<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>

＆＃13;

这种方法应该这样做。在使用querySelector()和querySelectorAll的纯JavaScript中。你只需要代码。只更改了CSS和HTML，使其适用于示例。

将滑块的下一个和上一个按钮更改为即将播放或上一张照片的预览

1 个答案: