1

編集:ユーザーがクリックしていない場合にのみ間隔を開始する方法はありますか? 例: 20 秒の間隔を設定しましたが、ユーザーが 15 秒で最初の画像をクリックした場合、次の画像は残りの 5 秒間しか表示されません。タイマーまたはクリックが必要ですが、両方は必要ありません。ありがとう！

したがって、現在onclickで動作する以下のjavascriptがあります。タイマーも追加するように変更できますか? したがって、最初の画像をクリックしない場合は、タイマーを設定して画像 2.. に移動し、次に画像 3.. に移動することができます。あなたの努力に感謝します！

<img alt="" src="image1.gif" style="height: XXXpx; width: XXXpx" id="imgClickAndChange" onclick="changeImage()"  />

<script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "image1.gif") 
        {
            document.getElementById("imgClickAndChange").src = "image2.gif";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "image3.gif";
        }
    }
</script>
4

4 に答える 4

0

使用するsetInterval

setInterval(function() { changeImage(); }, 3000);
于 2013-04-06T04:41:47.560 に答える
0

以下のこのスニペットを使用してみてください。設定された時間の後にランダムな画像が選択されます -

<script type="text/javascript" language="javascript">
          var intTimer=0;

          function ImageRotate()

          {
              intTimer = self.setInterval("GenerateRandom()",3000);
          }

          function GenerateRandom()
          {
          var intNumber = 10;  
          var intRandom = 0;

              intRandom = Math.floor(Math.random() * intNumber + 1);

              document.getElementById("ImageRandom1").src = 
              "Pictures1/Image" + intRandom + ".JPG";

      }
 </script>
于 2013-04-06T04:42:37.240 に答える
0

画像を配列に入れ、 setInterval を使用してこのjsBin Demoのように関数を呼び出します

編集しました！ 更新しました

var i = 0,
    element = document.getElementById("imgClickAndChange"),
    images = ["image1.gif", "image2.gif", "image3.gif"],
    timer = setInterval(changeImage, 25000);      

function changeImage() {
    element.src = images[(i >= images.length) ? (i = 0) : i++];
}

element.addEventListener("click", function() {
    changeImage();
    clearInterval(timer);
    timer = setInterval(changeImage, 25000);
}, false);
于 2013-04-06T04:43:52.293 に答える
0

間隔を置いsetIntervalて関数を呼び出すために使用できます。changeImage

これはうまくいくはずです：

<script language="javascript">
    function changeImage() {
        var img = document.getElementById("imgClickAndChange");
        img.src = (img.src == 'image1.gif') ? 'image2.gif' : 'image3.gif';
    }

    // auto-trigger every 1 second, change 1000 as needed
    setInterval(changeImage, 1000);
</script>

注: コードを変更してサイズを小さくしました。

于 2013-04-06T04:41:08.337 に答える