Как добавить таймер на одно изображение из нескольких фото на HTML - PullRequest
Новая
       0

Как добавить таймер на одно изображение из нескольких фото на HTML

0 голосов
/ 27 мая 2020

Итак, у меня есть этот HTML код, чтобы просто показывать изображения в браузере, каждый щелчок мыши переходит к следующему изображению. Мой вопрос: как я могу сделать Slide13 автоматически go на Slide14 через 4 секунды, а затем go вернуться к щелчку для перехода между изображениями? Спасибо !! 

<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>

1 Ответ

0 голосов
/ 28 мая 2020

Добавьте это к своему шагу: 

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

Он будет проверять на каждом шаге исходное значение изображения, когда оно попадает в Slide13.GIF, он будет имитировать щелчок по нему через 4 секунды и go к следующему.

См. Демо ниже, на 3-м изображении он щелкнет через 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>

EDIT:

Он работает с гифками, я просто добавил два из них, на шагах 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") {

Как видно из отредактированной демонстрации, теперь он будет щелкать по двум гифкам, номера 3 и 5. Вы можете добавить console.log(image); под переменную изображения, чтобы увидеть правильный источник изображения и использовать его в condition.

Если у вас есть проблемы с поиском путей, вы можете использовать это как свои условия: 

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

Это проверит, содержит ли переменная изображения исходного значения нужный заголовок изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...