Question

嗨！我正在尝试创建一个轮播/图像滑块，该滑块是自动的并且可对onclick事件做出反应，但是出于某种原因，即使代码非常完美，onclick事件也会使滑块的自动流程混乱！

有人可以告诉我这段代码有什么问题，以及解决该问题的解决方案！谢谢！

var i = 0; 			
var images = [];	
var time = 3000;	
	 
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";

var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);

function rightbuttonclick(){
   i++;
   changeImg();
}

function leftbuttonclick(){
   i--;
   changeImg();
}

function changeImg(){

   document.getElementById('startersliders').src = images[i];

   if(i < images.length - 1){
      i++; 
   } 

   else { 
      i = 0;
   }

   // Run function every x seconds
   setTimeout("changeImg()", time);

}

function changenext(){
   i++;
   changeImg();
}

// Run function when page loads
window.onload=changeImg;

<button id="leftbutton">left</button>

<img id="startersliders"  width="400" height="200"/>

<button id="rightbutton">right</button>

Answer 1

下面的代码可以为您提供帮助

 var prevbutton=document.querySelector("#leftbutton");

//nextbutton.addEventListener("click",leftbuttonclick);

prevbutton.addEventListener("click",leftbuttonclick);

Answer 2

保留一个变量，例如：setTime，该变量决定是否再次调用setTimeout。

function rightbuttonclick() {
  i++;
  changeImg(false);
}

function leftbuttonclick() {
  i--;
  changeImg(false);
}


function changeImg(setTime) {
  document.getElementById('startersliders').src = images[i];

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  // Run function every x seconds
  if (setTime !== false)
    setTimeout("changeImg()", time);
}

var i = 0;
var images = [];
var time = 3000;


images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";

var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);

var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);

function rightbuttonclick() {
  i++;
  changeImg(false);
}

function leftbuttonclick() {
  i--;
  changeImg(false);
}

function changeImg(setTime) {
  document.getElementById('startersliders').src = images[i];

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }
  // Run function every x seconds
  if (setTime !== false)
    setTimeout("changeImg()", time);
}


// Run function when page loads
window.onload = changeImg();

<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />

<button id="rightbutton">right</button>

或者您可以使用setInterval代替setTimeout，如下所示：

var i = 0;
var images = [];
var time = 3000;


images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";

var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);

var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);

function rightbuttonclick() {
  i++;
  changeImg(false);
}

function leftbuttonclick() {
  i--;
  changeImg(false);
}

function changeImg(setTime) {
  document.getElementById('startersliders').src = images[i];

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }

}
window.onload = changeImg();
setInterval(function() {
  changeImg()
}, time);

<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />

<button id="rightbutton">right</button>

Answer 3

向clearTimeout添加chageImg()函数，它将起作用，之所以表现奇怪是因为setTimeout被多次调用了。使用setInverval或setTimeout时应始终小心。这是一个代码段

function changeImg(){
  clearTimeout(interval);
    document.getElementById('startersliders').src = images[i];


  if(i < images.length - 1){

      i++; 
    } 
  else { 

        i = 0;
    }

    // Run function every x seconds
    interval = setTimeout("changeImg()", time);
}

javascript对onclick事件的怪异动作

3 个答案: