Создать таймер для просмотра изображений - PullRequest
Новая
       3

Создать таймер для просмотра изображений

0 голосов
/ 30 сентября 2018

Используя Javascript и HTML, мне нужно создать таймер для отображения картинок каждые 3 секунды.Мне нужно использовать массив, чтобы сделать это и сохранить доступность onclick. 

<meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title> Image Swapping</title>

        <div id=getPhoto></div>
        <script>
            var images = ["image1.jpg", "image2.jpg", "image3.jpg", image4.jpg"];
            function changeImage(newImage) {
                var image = images[newImage];
                newImage = document.getElementById("bigPic");
                newImage.src = image;
            }
            var myTimer = setInterval(chose(), 3000);
            var divVariable = document.getElementById("images");
            function chose(){
                var rand = Math.ceil(Math.random() * images.length);

            }

            document.getElementById('newImage').src = images[rand];
        </script>
    </head>


    <body>
        <div>
            <img src="image1.jpg" id="bigPic" style="width:60%" />
        </div>
            <img src="image1.jpg" id="img1" onclick="changeImage(0)"  />
            <img src="image2.jpg" id="img2" onclick="changeImage(1)" />
            <img src="image3.jpg" id="img3" onclick="changeImage(2)" />
            <img src="image4.jpg" id="img4" onclick="changeImage(3)"  />

        </div>

    </body>

</html>

1 Ответ

0 голосов
/ 01 октября 2018

Вам нужно научиться делать ... с вашим кодом много чего не так:

  1. div в голове?
  2. Забыли "в изображенияхмассив
  3. перезапись параметра в changeImage не очень хорошая идея
  4. использование () в setInterval немедленно вызовет функцию, и только один раз
  5. selected () ничего не делает
  6. индекс массива основан на 0 (0-3 для массива изображений), но вы округляете свое случайное число (1-4)

Откройте консоль браузера и проверьте наличиеошибки.

Возможно, вам нужно что-то вроде этого (не проверено): 

  <script>
      var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];

      function changeImage( idx ) {
          var newImage = document.getElementById("bigPic");
          newImage.src = images[idx];
      }

      function chose(){
          var rand = Math.floor(Math.random() * images.length);
          changeImage(rand);
      }

      chose(); // call immediately
      var myTimer = setInterval(chose, 3000);
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...