Изменить фон с помощью setInterval

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

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

В моем css я:

html, body, #wrapper { height:100%; margin: 0; padding: 0; border: none; background-image:url('images/indexbg01.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center center; } 

и мой javascript у меня:

 var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg', 'images/indexbg04.jpg', 'images/indexbg05.jpg', 'images/indexbg01.jpg']; var imageIndex = 0; function changeBgImage(){ var imageUrl = "url('" + imageArray[imageIndex] + "')"; $('body').css('background-image', imageUrl); imageIndex++; if (imageIndex >= imageArray.length) { imageIndex = 0; } } setInterval(changeBgImage, 5000); 

Сначала у меня была переменная imageUrl, построенная в следующей строке, но я добавил это, чтобы проверить, что она построена нормально. В отладчике chrome, когда я помещаю точку останова в строку, следующую за строкой построения imageUrl, она прекращается красиво каждые 5 секунд, imageUrl построен так, как должен, но фон не изменяется.

Я редактировал скрипку: http://jsfiddle.net/5Cv49/1/ .

Войдите и посмотрите. Единственная разметка:

 

Единственный измененный css:

 adding #wrapper to the selector. 

Посмотрите, как фон перекрывается фоном # обертки.

Работает в скрипке. Это означает, что вам нужно запустить скрипт после загрузки страницы, как это делает скрипка:

 $(window).load(function(){ //your script }); 

Рабочая скрипка

Один из подходов, который я лично сделал в прошлом, – это полное слайд-шоу с использованием jQuery. существует ряд версий слайд-шоу, которые вы можете использовать в Интернете. Их 100 из них лучше других. В слайд-шоу у вас есть время менять каждые 5 секунд, как вы хотели. в вашем html оберните слайд-шоу в div (например, #slideshow_background). оберните остальную часть вашей html-страницы в другую оболочку (#content). в вашем CSS установите следующее.

 #slideshow_background { margin:0; padding: 0; position : initial; width: 100%; height:100%; } 

поместите css для вашего #content и установите z-index в 1, чтобы он лежал над слайд-шоу.

надеюсь это поможет