javascript - javascript对onclick事件的奇怪动作

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>

标签： javascriptjqueryhtmlcss

Answer 1

这是一个可以帮助你的代码，

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

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

prevbutton.addEventListener("click",leftbuttonclick);