JQuery $ («тело») изображение своп помощь

Question

У меня есть код ниже:

$(document).ready(function() { 
    var bgimages=new Array() 
    bgImages[0]="bg.jpg" 
    bgImages[1]="bg2.jpg" 
    //sloppy preload images 
    var pathToImg=new Array() 
    for (i=0;i<bgImages.length;i++) 
    { 
    pathToImg[i]=new Image() 
    pathToImg[i].src=bgImages[i] 
    } 

    var i = 0; 
    var rotateBg = setInterval(
    function(){ 
    $('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    }, 9000); 
}); 

мне нужна помощь, решая 2 вопроса:

1. Это только цикл через образы когда-то, что ж Я пропустил? Я бы хотел, чтобы это повторялось бесконечно.
2. Как я могу перечеркнуть изображения?

Answer 1

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

В вашем случае, простой побитовое исключающее делает работу:

i ^= 1; 

Если у вас больше элементов в массиве, по модулю оп бы сделать работу:

i++; i %= bgImages.length; 

Для склейки , вы можете рассмотреть CSS transitions. На странице есть пример. Тем не менее, это рабочий проект W3C, и в настоящее время его поддерживают только браузеры на базе Webkit. Firefox должен поддерживать его до конца года. Нет слов о том, поддержит ли IE его и когда. Хорошая вещь - это очень просто создать, не требуется JS.

Выдержки:

<style type="text/css"> 
div.fader img { -webkit-transition: all 1s ease-in-out; } 
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; } 
div.fader:hover img.swap1, img.swap2 { opacity: 0; } 
</style> 

Answer 2

вы можете попробовать

function(){ 
i=i<bgImages.length?i:0; 
$('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    } 
} 

это сбросит я к 0 каждый раз, когда он достиг конца массива