Как менять картинки через разные промежутки времени?

Question

[Alexander Tartmin]

Есть набор картинок (установлены как фоновое изображение).
Надо менять каждую картинку через разные промежутки времени.
К примеру: между первой и второй картинкой промежуток времени 2 секунды, а между второй и третьей 4 секунды, но при этом между третьей и четвертой 1.5 секунды.

Решение:
Пример с заменой классов jsfiddle.net/aMuCX
Пример с заменой изображения jsfiddle.net/ShQ2H/1
Первый вариант самый лучший в плане работы. Во втором варианте на некоторых ПК при замене фонового изображения были видны "пробелы". То есть фон не сразу менялся, а видно было как он пропадает и потом появляется.

Решение2:
jsfiddle.net/iiil/4hgb3/11/

Comments

[Юрий Лобанов]

Промежутки времени заранее определены и количество картинок тоже? Приложите пример, как Вы делаете

[Alexander Tartmin]

@iiil у меня есть еллемент с определенным индетификатором
и в стилях прописано 9 класов с разными бекграундами
мне надо с заранее известными интервалами подставить классы (9 штук) этому еллементу

[Alexander Tartmin]

@iiil как бы выходит слайд-шоу, но проблема не в самом слайд-шоу, а в том, что бы между слайдами выходило разное время

[Сергей Мекетюк]

Так вам нужно класс менять или картинку? Я вот ниже сделал для картинки, могу переработать для смени класса.

[Alexander Tartmin]

@SergeiMeketyuk ну дело в том что я подставляю эллементу фон с помощью класа

[Сергей Мекетюк]

@tartmin исправил свой пример. Теперь там классы меняются.

[Alexander Tartmin]

Пример с заменой классов jsfiddle.net/aMuCX
Пример с заменой изображения jsfiddle.net/ShQ2H/1
Первый вариант самый лучший в плане работы. Во втором варианте на некоторых ПК при замене фонового изображения были видны "пробелы". То есть фон не сразу менялся, а видно было как он пропадает и потом появляется.

[Юрий Лобанов]

@tartmin

Во втором варианте на некоторых ПК при замене фонового изображения были видны "пробелы". То есть фон не сразу менялся, а видно было как он пропадает и потом появляется.

Возможно картинки не успевали загрузиться. Второй вариант хорош тем, что не надо прописывать классы в css, в каждом указывать изображение, а потом еще и записывать имена классов в массив. Поэтому я бы советовал Вам использовать вариант 2. Если Вас устроит вариант, при котором изображения будут называться image0, image1, image2 и тд, то есть какое-то слово и число от 0 до n - то второй вариант можно сделать еще проще и без ограничений на одинаковые значение промежутков времени.
Напишите, если интересно - я сделаю.

[Alexander Tartmin]

@iiil Можете написать, мне интересно взглянуть =)
Да и думаю инфа будет полезно и кому то пригодится.
Для себя я пока нашел железно-бетонное решение (css+js) и оно меня устраивает.

Answer 1

[Сергей Мекетюк]

$(function() {
    var images = [{
            class: "first-img", // Класс
            timeout: 2000 // Задержка для класса
        }, {
            class: "second-img",
            timeout: 5000
        }, {
            class: "third-img",
            timeout: 3000
        }],
        i = 0,
        timeout;

    
    function changeBackground() {
        clearTimeout(timeout);

        $('body').removeClass().addClass(function() {
            if (i >= images.length)
                i = 0;
            
            timeout = setTimeout(changeBackground, images[i].timeout);
     
            return images[i++].class;
        });
              
    }

    changeBackground();        
});

Comments

[Alexander Tartmin]

@SergeiMeketyuk спасибо огромное за помощь :)
Завтра набросаю в jsfidle оба примера и сюда коментом прикреплю, может ещё кому пригодится.

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/4hgb3/11
Вот пример, простой, работает (можно проверить через инспектор кода).
Все, что нужно сделать - закинуть картинки в папку img и назвать их image1, image2. image3. И прописать для каждой через запятую шаг.

Answer 3

[ixon]

Допустим у вас есть 10 классов с фоновыми картинками с именем new1, new2, new3 и тд. Примерно так:

var i =1;
function slide(){
if(i>10){// 10 число картинок всего
i=1;
}
document.getElementById('tek').class='new'+i;// newN - ваш класс, где N - номер класса
setTimeout(1000,function(){slide();})
}

Но мой вам совет, если хотите сделать слайдшоу, то лучше используйте готовые Jquery библиотеки.

Comments

[Alexander Tartmin]

я пробовал найти что то нужное, но не смог. Моих знаний в jQuery хватает сделать свое слайдшоу с преферансом и кордебалетом. Но вот тут стала задача сделать разные интервалы смены "кадров"

Answer 4

[Юрий Лобанов]

jsfiddle.net/iiil/4hgb3/6

Можно обойтись без классов. Смотрите мой пример, надо будет всего-лишь создать массив по моему варианту, только пути к картинкам будут короче. Можно вообще использовать обычный массив, если картинки будут в одной папке и будут называться как-нибудь типа image1, image2, image3

Comments

[Alexander Tartmin]

Ваш пример подходит больше всего. Но не могу понять по чему когда я ставлю больше 4 кадров, анимация зависает.

[Юрий Лобанов]

jsfiddle.net/4hgb3/7
Что-то неправильно делаете. Вот пример с бОльшим количеством

[Юрий Лобанов]

@tartmin возможно Вы вбиваете одинаковые ключи? То есть одинаковые интервалы времени. Если такая задача есть, например два интервала должны быть 1с, то надо использовать такое число 1 и 1.01 разницы Вы не почувствуете, а работать будет.
jsfiddle.net/4hgb3/9

Answer 5

[k0st1_k]

Подскажите как сделать замену плавно, чтобы одна затухала (постепенно становилась прозрачной черзе 2 секунды) и появлялась другая (на этом же фоне) - т.е. чтобы был плавный переход одной в другую и так по кругу 3-4 картинки?