Нажмите кнопку Изменить изображения в Javascript - PullRequest
Новая
       0

Нажмите кнопку Изменить изображения в Javascript

0 голосов
/ 25 августа 2018

Я все еще изучаю Javacripts.Это одно из моих первых заданий дома.Тем не менее, я не могу заставить работать коды, даже пытаясь пошагово следовать инструкциям.Мне нужно создать слайд-шоу, где при нажатии на кнопку будет новое изображение, пока оно не вернется к первому.Я проверил все, но я до сих пор не могу понять, что я сделал не так.Если вы можете объяснить и помочь, я очень признателен.

<body onload="startup();">
    <center>

    <img id="banner" src="images/bangkok_thailand.jpg"> 
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>

<script>
        var imgArray = new Array();
        var index = 0;


function cycle() {
            document.getElementById("banner").src = imgArray[index].src;
            index = index + 1;
            if (index > 5 ) {
                index = 0;
            }
            return;

} 

function startup()
    {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image; 
        imgArray[4] = new Image; 
        imgArray[5] = new Image;

    imgArray[0]. src="images/bangkok_thailand.jpg";
    imgArray[1]. src="images/paris_france.jpg";
    imgArray[2]. src="images/seoul_southkorea.jpg";
    imgArray[3]. src="images/tokyo_japan.jpg";
    imgArray[4]. src="images/istanbul_turkey.jpg";
    imgArray[5]. src="images/amsterdam_netherlands";
    }
    //cycle();
    return;


</script>
</center>

1 Ответ

0 голосов
/ 25 августа 2018

Во-первых, у вас есть сценарий return в скрипте - это приводит к тому, что функция не загружается. Во-вторых, у вас есть пробел между imgArray[x]. и src. Исправьте первую проблему, и она должна работать, вторая проблема не является обязательной, но вы также захотите ее исправить.

Я использую https://picsum.photos/ для демонстрации ниже. Надеюсь, это поможет 

<body onload="startup();">
  <center>

    <img id="banner" src="https://picsum.photos/400/300/?random">
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>
    <script>
      var imgArray = new Array();
      var index = 0;


      function cycle() {
        document.getElementById("banner").src = imgArray[index].src;
        index = index + 1;
        if (index > 5) {
          index = 0;
        }
        return;
      }

      function startup() {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image;
        imgArray[4] = new Image;
        imgArray[5] = new Image;

        imgArray[0].src = "https://picsum.photos/350/300/?random";
        imgArray[1].src = "https://picsum.photos/300/300/?random";
        imgArray[2].src = "https://picsum.photos/250/300/?random";
        imgArray[3].src = "https://picsum.photos/200/300/?random";
        imgArray[4].src = "https://picsum.photos/150/300/?random";
        imgArray[5].src = "https://picsum.photos/100/300/?random";
      }
    </script>
  </center>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...