Демонстрация слайдшоу

Данный пример демонстрирует использование Backstretch для создания слайдшоу фоновых изображений


<script src="../lib/jquery-1.6.4.min.js"></script>
<script src="../jquery.backstretch.min.js"></script>
<script>
    // Создаем массив изображений.
    var images = [
        "pot-holder.jpg",
        "coffee.jpg"
    ];
    
    // Небольшой скрипт для предварительной загрузки изображений.
    // В нем нет острой нужды, но идея хороша.
    $(images).each(function(){
       $('')[0].src = this; 
    });
    
    // Переменная index указывает на текущее используемое изображение.
    var index = 0;

    // Вызываем Backstretch в первый раз.
    // В данном случае используется скорость в 500ms для эффекта проявления изображений.
    $.backstretch(images[index], {speed: 500});

    // Устанавливаем интервал, через который будет увеличиваться index и устанавливаться новое изображение.
    // Примечание: скорость проявления будет использвоаться из первого вызова плагина.
    setInterval(function() {
        index = (index >= images.length - 1) ? 0 : index + 1;
        $.backstretch(images[index]);
    }, 5000);
</script>
        

Другие демонстрации

Демонстрация базового функционала
Демонстрация смены фона по нажатию кнопки мыши