Settimeout搞乱javascript中的onclick事件

问题描述 投票：-1回答：3

即时尝试创建一个自动图像滑块，它也响应onclick功能，由于一些奇怪的原因，onclick事件几乎没有做什么我怀疑它的原因因为javascript是单线程但我不是javascript的高手！有人可以告诉我，过去两天我坚持做错了什么！谢谢！

var i = 0;      
var starterimages= [];
var time = 3000;  
var eventaction=0;
var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";




var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
nextbutton.addEventListener("click",leftbuttonclick);

function rightbuttonclick()
{
eventaction=1;
clearTimeout(timeoutId);
}

function leftbuttonclick()
{
eventaction=2;
clearTimeout(timeoutId);
}

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

  if(eventaction==1)
  {
    i++;
    if(i < starterimages.length - 1) 
    {document.getElementById('startersliders').src = starterimages[i];
    eventaction=0;}
    else
    {
      i=0;
      document.getElementById('startersliders').src = starterimages[i];
    eventaction=0;
    }
    
  }
  else if(eventaction==2)
  {
    i--;
     if(i== - 1) 
     {
       i=3;
        document.getElementById('startersliders').src = starterimages[i];
     eventaction=0;
     }
     else
    {
      document.getElementById('startersliders').src = starterimages[i];
    eventaction=0;
    }
  }
  else if(eventaction==0){
  if(i < starterimages.length - 1){
    
    i++; 
  } 
  else { 
  
    i = 0;
  }
  }

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


// Run function when page loads
window.onload=changeImg;
#staratersliders {
  width: 10%;
  height: 10%;
  position: relative;
  margin: 0% 0% 0% 0%;
}
<button class="button button3" id="leftbutton"> previous</button>
<img id="startersliders" />

<button class="button button3" id="rightbutton">next</button>
javascript jquery html css
3个回答
0
投票

我把它全部用在Firefox 51中，包括按钮。只需将整个内容粘贴到空白页面中，然后使用.htm或.html扩展名保存即可。

<!DOCTYPE=HTML><html><meta charset="UTF-8">
<script>

var i = 0;      
var starterimages= [];
var time = 3000;  
var eventaction=0;
var timeoutId;

starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";
starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";
starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";

function rightbuttonclick() {
  eventaction = 1;
  clearTimeout(timeoutId);
  changeImg();
}

function leftbuttonclick() {
  eventaction = 2;
  clearTimeout(timeoutId);
  changeImg();
}

function changeImg() {
  if (eventaction == 1) {
    if (i < starterimages.length - 1) {
      i++;
      document.getElementById('startersliders').src=starterimages[i];  
      eventaction = 0;
    } else { 
      i = 0;
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else if (eventaction == 2) {
    i--;
    if (i < 0) {
      i = 2;
      document.getElementById('startersliders').src=starterimages[i]; 
      eventaction = 0;
    } else {
      document.getElementById('startersliders').src=starterimages[i];
      eventaction = 0;
    }
  } else {
    if (i < starterimages.length - 1) {
      i++;
    } else {
      i = 0;
    };

    document.getElementById('startersliders').src=starterimages[i];
    eventaction = 0;
  } 

  timeoutId=setTimeout("changeImg()", time);
}
</script>

<style>
#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}
</style>

<body onload="changeImg();">

<button class="button button3" id="leftbutton">previous</button>
<img id="startersliders">
<button class="button button3" id="rightbutton">next</button>

<script>
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);
</script>

</body>
</html>
0
投票

它不会起作用，因为：

setTimeout("changeImg()", time);

是setTimeout的无效语法。要修复它，只需执行以下操作：

setTimeout(changeImg, time);
0
投票
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
nextbutton.addEventListener("click",leftbuttonclick);

我将代码复制/粘贴到我的机器中，上面的代码为null，因为它们需要位于doc正文底部的脚本标记之间。当解析器看到顶部的那些时，它不知道#rightbutton和#leftbutton是什么，因为它还没有解析body部分中的html所以它返回为null元素

只需在html之后将它们移动到body部分的底部，然后在它们周围放置脚本/脚本标签，看看会发生什么

你需要做上述两点，Matthew Herbst所说的是正确的，而Jack Bashford所说的是正确的。为setTimeout创建一个变量

var mytimeinverval;
var mytimer;
mytimer=setTimeout(myfunctionname,mytimeinterval);

setTimeout中的函数名称不会获得引号或括号。如果你加上括号，它可能会立即触发或谁知道？它仍然将myfunctionname识别为没有括号的函数。在它周围加上引号使它成为一个字符串 - 根据我的经验不会起作用。我不想要信用，他们回答了，只是让你知道要做到这两点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.