Как сделать так, чтобы 3 Div меняли изображение каждую секунду из собственной папки?

Question

Как сделать так, чтобы 3 Div меняли изображение каждую секунду из собственной папки?

0

Я хочу иметь 3 div, которые меняют свой образ каждую секунду. Этот код не вызывает никаких ошибок, но единственный, который работает, - это третий div с источником script9.js. Почему это происходит? Пожалуйста, помогите... Вот он:

У меня есть 3 погружения, которые содержат изображения из собственной папки:

<html>
<head>
  <script type="text/javascript" src="mainjavascript.js"></script>
  <script type="text/javascript" src="script8.js"></script>
  <script type="text/javascript" src="script9.js"></script>
</head>
<body onload = "startTimer()">

  <div><img id="img" src="pictures7/1.jpg">7</div>
  <div><img id="img2" src="pictures8/1.jpg">8</div>
  <div><img id="img3" src="pictures9/1.jpg">9</div>
</body>
</html>

У меня есть 3 похожих файла JavaScript, по одному для каждого div, который получает элемент по идентификатору, единственное отличие заключается в знаках "** **":

 function displayImage(image) {
          document.getElementById(**"img"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures7/"** + "1.jpg";
      images[1] = **"pictures7/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures7/"** + (y+1) + ".jpg";
      }

2-й дивизион:

 function displayImage(image) {
          document.getElementById(**"img2"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures8/"** + "1.jpg";
      images[1] = **"pictures8/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures8/"** + (y+1) + ".jpg";
      }

3rd Div:

 function displayImage(image) {
          document.getElementById(**"img3"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures9/"** + "1.jpg";
      images[1] = **"pictures9/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures9/"** + (y+1) + ".jpg";
      }

Опять же, только изображение с идентификатором "img3.jpg" работает... отменяет ли он другой код? Должен ли я использовать JQuery или какой-либо другой код? Пожалуйста, помогите мне.

user3440259 23 март 2014, в 18:50

Источник

0

Вы повторяете те же функции. Вы должны использовать один набор функций и передавать им пути к папкам с изображениями в качестве переменных.
Tharaka 23 март 2014, в 23:11

Теги:

php

javascript

jquery

html5

asp.net

3 ответа

Ещё вопросы

Вы повторяете те же функции. Вы должны использовать один набор функций и передавать им пути к папкам с изображениями в качестве переменных.

sockfd · Answer 1 · 2014-03-23T15-46-00.000Z

Вы повторяете одни и те же определения функций несколько раз; дать им разные имена.

можешь привести пример? Я застрял на этом в течение нескольких часов.
Можете ли вы показать нам все ваши файлы JS их код?
это все, что у меня есть. как я могу не повторять одни и те же функции?

Remento · Answer 2 · 2014-03-23T14-46-00.000Z

У вас есть те же функции, что и в трех файлах. Однако сами функции создаются в глобальной области, поэтому каждый JS файл перезаписывает предыдущий. Вы можете проверить это с помощью консоли разработчика в Chrome.

Вы хотите сохранить свой код DRY - не повторяйте себя. Поэтому попробуйте переписать это только с одной функцией, которая запускается на загрузке страницы и объединяет оставшиеся три файла в один.

Как я могу сделать эти функции по-другому, чтобы он мог работать. Я новичок в этом, я немного запутался.

Tom · Answer 3 · 2014-03-23T15-40-00.000Z

Это взбило это, так как это просто зацикливается на массив, и если он пытается идти дальше массива, то он сбрасывается до первого изображения

var images = ['create an array of pictures']
var currentimage = 0;

function loop() {
 currentimage++;

if(currentimage > images.length){
 currentimage = 0;
}
 setimage();
}

function setImage() {
    document.getElementById('image').src = images[currentImage];
}

setInterval(loop, 1000);