Question

我试图创建一个自动图像滑块，该滑块也响应onclick函数，出于某种奇怪的原因，onclick事件几乎没有发生作用，我怀疑它的原因是settime超时，因为javascript是单线程的，但我不是javascript的高手！有人可以告诉我过去两天我在做什么错吗！谢谢！

# A tibble: 3 x 3
  V1                 V2                            
  <chr>              <chr>                         
1 545253503963516928 Wed Dec 17 16:25:40 +0000 2014
2 545235402156937217 Wed Dec 17 15:13:44 +0000 2014
3 545074589374881792 Wed Dec 17 04:34:43 +0000 2014
  V3                                                                            
  <chr>                                                                         
1 Massachusetts Pharmacy Owners Arrested in Meningitis Deaths http://xxxxxxxxx  
2 For First Time, Treatment Helps Patients With Worst Kind of Stroke, Study Say…
3 National Briefing | New England: Massachusetts: Sex-Change Surgery Denied to …

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%;
}

Answer 1

由于以下原因，它不起作用：

setTimeout("changeImg()", time);

setTimeout的语法无效。要解决此问题，只需执行以下操作：

setTimeout(changeImg, time);

Answer 2

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

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

我将代码复制/粘贴到计算机中，并且上面的内容为空，因为它们需要位于文档正文底部的脚本标签之间。当解析器看到顶部的内容时，它不知道#rightbutton和#leftbutton是什么，因为它尚未解析body部分中的html，因此它以空元素的形式返回

只需将它们移到html之后的主体部分的底部，然后将脚本/ script标签放在它们周围，看看会发生什么情况

您需要执行以上两项操作，马修·赫伯斯特（Matthew Herbst）所说的是正确的，杰克·巴什福德（Jack Bashford）所说的是正确的。为setTimeout创建一个变量

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

setTimeout中的函数名称不带引号或括号。如果插入括号，它可能会立即触发，或者谁知道呢？它仍然将myfunctionname识别为没有括号的函数。用引号引起来会使它成为字符串，根据我的经验，这是行不通的。我不想要信誉，他们回答了，只是让您知道两者都做。

Answer 3

我已经全部使用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>

Settime Out搞砸了JavaScript中的onclick事件

3 个答案: