时间戳

首页 > 解决方案 > 如何在 HTML 上的多张图片中为一张图片添加计时器

javascript - 如何在 HTML 上的多张图片中为一张图片添加计时器

问题描述

所以我有这个 HTML 代码只在浏览器上显示图片，每次点击都会转换到下一张图片。我的问题是如何让 Slide13 在 4 秒后自动转到 Slide14，然后返回单击以在图片之间转换？谢谢！！

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Slide1.PNG</title>
  </head>
  <body onclick="step()">
        <img id="image_id" src="" style="width:100%;height:100%">
  </body>
  <script type="text/javascript">


    var images=[
            "Slide1.PNG",
                "Slide2.PNG",
                "Slide3.PNG",
                "Slide4.PNG",
          "Slide5.PNG",
          "Slide6.PNG",
          "Slide7.PNG",
          "Slide8.PNG",
          "Slide9.PNG",
          "Slide10.PNG",
          "Slide11.PNG",
          "Slide12.PNG",
          "Slide13.GIF",
          "Slide14.PNG",
          "Slide15.GIF",
          "Slide16.PNG",
          "Slide17.PNG",
          "Slide18.PNG",
          "Slide19.PNG",
          "Slide20.GIF",
          "Slide21.PNG",
          "Slide22.PNG",
          "Slide23.PNG",
          "Slide24.PNG",
          "Slide25.PNG",
          "Slide26.PNG",
          "Slide27.PNG",
          "Slide28.PNG",
          "Slide29.PNG",
          "Slide30.PNG",
          "Slide31.PNG",
          "Slide32.PNG",
          "Slide33.PNG",
          "Slide34.PNG"
            ];



        var index=0;
        var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
        function step(){
            document.getElementById('image_id').src=images[(index++)%images.length];
        }
        step();
        </script>
</html>

标签： javascripthtml

解决方案

将此添加到您的步骤中：

    var image = document.getElementById("image_id").src;
                if (image=="Slide13.GIF") {
                     setTimeout(function(){
 document.getElementById('image_id').click();}, 4000);      
                }

它会在每一步检查图像的源值，当它点击 Slide13.GIF 时，它将在 4 秒后模拟点击它并转到下一个。

请参见下面的演示，在 3ed 图像上，它将在 2 秒后单击它。

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Slide1.PNG</title>
  </head>
  <body onclick="step()">
        <img id="image_id" src="" style="width:100%;height:100%">
  </body>
  <script type="text/javascript">


    var images=[
            "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.zYTlTH6b_YYEeNCvZsznjgHaD5%26pid%3DApi&f=1",
                "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.ZJA-xTrw2bHQaUXA6buoGwHaDt%26pid%3DApi&f=1",
                "https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif",
                "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.qz01j4K29bmGqCy1hIwGswHaFf%26pid%3DApi&f=1",
          "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1",
          "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.wae3QtVQ_QQvkeaQ3alxzgHaEY%26pid%3DApi&f=1",
          "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.xd0rh27OUOrMUw8_ACG0HwHaDt%26pid%3DApi&f=1",
          "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.adQHsWv9A37aVRLNDLLlkwHaEK%26pid%3DApi&f=1",
          "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3nRZ72gyQTUakC-ZbhQ_MQHaHa%26pid%3DApi&f=1"
            ];



        var index=0;
        var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
        function step(){
            document.getElementById('image_id').src=images[(index++)%images.length];
            var image = document.getElementById("image_id").src;
            console.log(image);
            if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" || image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {
            	 setTimeout(function(){ document.getElementById('image_id').click(); }, 3000);   	
            }
        }
        step();
        </script>


</html>

编辑：

它确实适用于 gif，我只是在第 3 步和第 5 步中添加了其中的两个。此外，如果您的 if 语句中需要更多条件，请将它们用 || 分隔。像这样：

    if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" || 
image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {

正如现在编辑的演示中所见，它将单击两个 gif，编号 3 和 5。您可以添加console.log(image);下面的图像变量以查看正确的图像源并在条件下使用它。

如果您在查找路径时遇到问题，可以将其用作您的条件：

if (image.indexOf("Slide13.GIF") >= 0 || image.indexOf(" other pic ") >= 0")

这将检查源值的图像变量是否包含您想要的图像标题。

推荐阅读