Question

如果用户没有点击任何内容，我有一个每4秒钟通过幻灯片的旋转木马。但是，我得到的问题是，例如，如果用户在1秒后点击幻灯片，然后在2秒后点击下一张幻灯片，则以下幻灯片不会在4秒后出现。 js代码如下：

var arr = [];
arr[0]= new Image();
arr[0].src = "1.jpg";
arr[1]= new Image();
arr[1].src = "2.jpg";
arr[2]= new Image();
arr[2].src = "3.jpg";

titleArray = new Array();
titleArray[0] = "first";
titleArray[1] = "second";
titleArray[2] = "third";

var i=0;

function slide(){
document.getElementById("img1").src= arr[i].src;
document.getElementById("title").innerHTML = titleArray[i];
    i++;
    if(i==arr.length){
        i=0;
    }
setTimeout(function(){ slide(); },4000);
}

html是：

<!doctype html>
<html lang="en">
<head>
 <title>Carousel</title>

 <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700'     rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="style.css">
</head>

<body onLoad="slide();">

<div class="image">
  <img src="1.jpg" width="510" height="390" id="img1">
  <a href="JavaScript:slide(this)">  
<img src="carousel-label-box.png"    id="img2" width="310" height="190"> 
  </a>
  <h1 id="title">first</h1>

 </div>
 <script src="script.js"></script>
</body>
</html>

Answer 1

您的意思是当用户点击图片时，幻灯片会在预定的4秒之前更改？

从我看到你应该调用clearTimeout（）来中断它，然后当用户点击图像而不是简单地调用幻灯片时再设置它。

编辑：忘了提及你应该在用户点击时调用slide（）函数。

为什么我的javascript轮播幻灯片没有重置？

1 个答案: