Велоспорт через изображение src's в jQuery

У меня есть массив, который содержит однобуквенные строки. Я хочу пройти через каждую строку в массиве, и мой сайт будет отображать соответствующее изображение для каждой буквы для пользователя в течение нескольких секунд. Между каждой буквой изображение-заполнитель должно отображаться в течение нескольких секунд.

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

var messageArray = ["a", "b", "c"];

function displayImages(messageArray) {
    $.each(messageArray, function(index, value) {
        $('#activeImg').attr("src", "images/letters/placeholder.png");
        console.log("PLACEHOLDER");

        setTimeout(function() { 
            $('#activeImg').attr("src", "images/letters/placeholder-letter-" + value + ".png");
            console.log(value);
        },2000 + ( index * 2000 ) );
    });
}

EDIT : Я считаю, что у меня есть то, что я хотел бы работать с ниже. Это потребовало добавления новой функции, которая создала новый массив с порядком, в котором я хотел отображать изображения.

function orderImages(messageArray) {
    var imagesArray = [];
    //Create a new array with the correct images to show in order
    $.each(messageArray, function(index, value) {
        imagesArray.push("images/letters/placeholder.png");
        imagesArray.push("images/letters/placeholder-letter-" + value + ".png");
    });
    displayImages(imagesArray);
}

function displayImages(imagesArray) {
    $.each(imagesArray, function(index, value) {
        setTimeout(function() { 
            $('#activeImg').attr("src", value);
        },1000 + ( index * 1000 ) );
    });
}

jquery,html,

0

Ответов: 2

1

Ваша текущая функция будет messageArrayопределять значение в заданном источнике #activeImageизображения-заполнителя без какого-либо времени между ними. Это совсем не то, что вы говорите, чего хотите. Вы обычно устанавливаете местозаполнитель 3 раза перед показом первого изображения, потому что первое изображение отображается после 2000 миллисекунд.

Это временная шкала #activeImage:

  • Создано с использованием источника по умолчанию
  • Источник обновлен с помощью placeholder.png
  • Источник обновлен с помощью placeholder.png
  • Источник обновлен с помощью placeholder.png
  • Источник, обновленный с помощью 'a'
  • Источник, обновленный с помощью 'b'
  • Источник, обновленный с помощью 'c'

Что вам нужно сделать, так это переключиться между показом заполнителя и другим изображением.

var toggleIntermission = false;
var index = 0;
function updateImage() {
    if(toggleIntermission) {
        $("#activeImage").attr("src",<placeholderpath>);
    } else {
        $("#activeImage").attr("src", <imagepath> + index);
        index = (index + 1) % messageArray
    }

    toggleIntermission != toggleIntermission;
    setTimeout("updateImage()",2000);
}

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

0 принят

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

function orderImages(messageArray) {
    var imagesArray = [];
    //Create a new array with the correct images to show in order
    $.each(messageArray, function(index, value) {
        imagesArray.push("images/letters/placeholder.png");
        imagesArray.push("images/letters/placeholder-letter-" + value + ".png");
    });
    displayImages(imagesArray);
}

function displayImages(imagesArray) {
    $.each(imagesArray, function(index, value) {
        setTimeout(function() { 
            $('#activeImg').attr("src", value);
        },1000 + ( index * 1000 ) );
    });
}
JQuery, HTML,
Похожие вопросы
Яндекс.Метрика