Создание карусели изображений с использованием setInterval - PullRequest
Новая
       27

Создание карусели изображений с использованием setInterval

1 голос
/ 22 мая 2019

Я делаю карусель изображений, используя setInterval, и если операторы и изображения отображаются нормально, однако, когда карусель запускается снова, отображается значок, который обычно отображается, когда страница не может найти ваше изображение. 

<img src="images/img1.jpg" id="images">

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data;
    if (start==1) {
      image_data="images/img1.jpg";
    }else if (start==2) {
      image_data="images/img2.jpg";
    }else if (start==3) {
      image_data="images/img3.jpg";
    }else if (start==4) {
      image_data="images/img4.jpg";
    }else if (start==5) {
      image_data="images/img5.jpg";
    }else {
      start = 0;
    }
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>

Ответы [ 3 ]

1 голос
/ 22 мая 2019

Это потому, что когда начало достигает 5 и вы используете 5-е изображение, то вы увеличиваете до 6 в конце функции.Затем, в следующий раз, вы не найдете нужного значения в своем каскаде операторов if, поэтому вы в конечном итоге устанавливаете img url для слова «null».Поскольку все ваши изображения имеют одинаковый формат, кроме номера, вы можете избавиться от каскада if и просто установить src на 'images/img' + start + '.jpg'.Тогда все, что вам нужно сделать, это прямо перед тем, как вы установите его, убедитесь, что он не превысил ваш самый большой индекс изображения, например:

if (start>5) {start=1;}

, а затем после того, как вы установите источникimg, увеличьте свой счетчик.

Если ваши изображения не действительно будут просто так проиндексированы, то вы можете сохранить URL-адреса в массиве и использовать счетчик какиндексировать в этот массив и просто проверить, индекс остается < array.length во время увеличения.

1 голос
/ 22 мая 2019

Когда вы устанавливаете начало в 0, вы устанавливаете источник изображения как неопределенный для этой итерации карусели, поскольку вы не присвоили значение источнику изображения.

Вместо этого рассмотрите возможность использования модулявыбрать изображение для отображения. 

// initially, start = 0
if (start % numImages === 0) {
  // display image 1
}
else if (start % numImages === 1) {
   // display image 2
}

ИЛИ: вы можете вызвать свой метод и вернуться при установке начала на 0: 

start = 1;
carousel();
return;

Но для более приемлемого решения вы можетехотите сделать это: 

const images = [ 'images/image1.jpg', ... ];
const currImage = images[ start % images.length ];
document.getElementById('images').src = currImage;
start++;

// This part is optional, it's unlikely a user would be on the page long enough
// for start to overflow
if (start === images.length) {
  start = 0;
}

Это будет ваша целая функция карусели.

Таким образом, вы можете легко добавить больше изображений позже, не слишком меняя свою функцию.Все, что вам нужно сделать, это перечислить файлы, которые вы отображаете в массиве, и все будет готово.

0 голосов
/ 22 мая 2019

Вы сбрасываете start в ноль, когда он равен 6. Это можно рассматривать как мод с 6. Ваш код может быть упрощен до следующего 

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data; 
    start =  start % 6;
    image_data = "images/img" +start+ ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>
...