Вращение через несколько массивов - PullRequest
Новая
       6

Вращение через несколько массивов

0 голосов
/ 02 мая 2018

Я пытаюсь сделать простое слайд-шоу со следующим кодом javascript, но он не работает для меня. Я трижды проверил орфографию и убедился, что все элементы соотносятся с моим HTML.

Javascript: 

var pic_rotation = ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
    cap_rotation = ["caption 1", "caption 2", "caption 3"];
var int = 0;

function rotatePicCap(){
    if (int < pic_rotation.length){
        int++;
    }
    else if (int == pic_rotation.length){
        int = 0;
    }
    document.getElementById("pic").src = pic_rotation[int];
    document.getElementById("cap").innerHTML = pic_rotation[int];
}

setInterval(function slideShow(){rotatePicCap()}, 4000);

HTML: 

<div id="slideshow">
    <img src="pic1.jpg" alt="Picture" id="pic">
    <div id="cap">caption 1</div>
</div>

Есть мысли о том, почему это не сработает?

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Ваш код в порядке, как он написан по большей части. Проблема, как @CertainPerformance говорит, хотя (оператор if).

Вы проверяете и увеличиваете int перед отображением своей информации. Таким образом, в начале с int равным 0, вы сначала отображаете pic2 из-за увеличения int до 1 перед отображением. Ваш оператор if правильно проверяет, что int меньше длины, но затем вы увеличиваете его перед отображением.

Внесите следующие изменения, и все в порядке: 

function rotatePicCap(){
    if (int == pic_rotation.length){
        int = 0;
    }
    document.getElementById("pic").src = pic_rotation[int];
    document.getElementById("cap").innerHTML = pic_rotation[int];
    int++;
}

Это все равно будет увеличиваться, но вы сделаете проверку раньше. Если int больше, вы перезапускаете с 0.

0 голосов
/ 02 мая 2018

Проблема здесь: 

if (int < pic_rotation.length) int++;

Посмотрите на консоль браузера - она ​​скажет вам, в чем проблема. На последней итерации int будет равно длине массива. Но для массива длины 3 arr[3] не определено.

Лучше использовать по модулю: 

function rotatePicCap(){
  int = (int + 1) % pic_rotation.length;

Еще одна вещь - используйте innerHTML, только когда вы намеренно используете или вставляете разметку HTML (что может иметь проблемы с безопасностью и кодированием). Когда вы устанавливаете или извлекаете текстовые значения, используйте textContent. 

document.getElementById("cap").textContent = pic_rotation[int];
...