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

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

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

Когда start достигает шести, оно сбрасывается до нуля, но image_data остается неопределенным.

showdev 22.05.2019 14:01
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
67
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

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

ИЛИ: вы можете вызвать свой метод и вернуться, если установите start равным 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;
}

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

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

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

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

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

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

Ответ принят как подходящий

Вы сбрасываете 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>

Другие вопросы по теме