Я создаю карусель изображений, используя 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 равным 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>
Когда
start
достигает шести, оно сбрасывается до нуля, ноimage_data
остается неопределенным.