Изменение имиджа по таймеру с помощью CSS и JavaScript
У меня возникла проблема с отображением имиджа по таймеру в Firefox, но в ie все хорошо, т.е. имиджи, которые я определил в массиве отображаются с периодом 1 сек. Подскажите где кроется ошибка, а может быть лучше сделать по другому?
Скрипт (поиск DIV класса present и замена поля background): Код: <script language="JavaScript" type="text/javascript"> i=0; img_a=new Array() img_a[0]="url(image/back.jpg) no-repeat scroll 100% 100%;" img_a[1]="url(image/back_2.jpg) no-repeat scroll 100% 100%;" function img_b() { var coll = document.getElementsByTagName("Div"); for(var j=0; j<coll.length; j++) { if(coll[j].className == "present") { coll[j].style.background=img_a[i]; } } i++ if(i>1) { i=0; } setTimeout("img_b()", 1000) } </script> CSS стиль Код: .present { height: 240px; width: 100%; background: url(image/back.jpg) no-repeat scroll 100% 100%; } HTML Код: <body onLoad=img_b()> <div class="present"></div> |
i=0; img_a=["url(image/back.jpg) no-repeat scroll 100% 100%;","url(image/back_2.jpg) no-repeat scroll 100% 100%;"] function img_b() { var coll = document.getElementsByTagName("Div"); for(var j=0,l=coll.length; j<l; j++){ if(coll[j].className == "present") { coll[j].style.background=img_a[i]; break; // незачем перебирать дальше, если уже нашли... } } i=1-i; setTimeout(arguments.callee, 1000); } а что хоть за проблема в ФФ? |
Цель скрипта, показ через указанный таймаут разных имиджей, т.е. сначала идидж1, потом имидж2 и т.д..
В ие скрипт работает и имиджи меняются по таймеру, а в фф отображается имидж1 и никакого изменения |
Надо сказать, что и подправленный Вами скрипт в фф также не отображает имиджи
|
ну так я ничего и не исправлял, я просто переписал получше :)
проверил - скрипт работает, картинка меняется :) |
Попробуйте менять только свойство backgroundImage, у меня работает:
<html> <head> <style> .b { height: 240px; width: 100%; background: url(back1.jpg) no-repeat scroll 100% 100%; } </style> <script> function cycleImages() { var i = 1; var element = document.getElementById("cycleBackground"); setInterval(function() { if(i >= 4) i = 1; element.style.backgroundImage = "url(back"+ (i++) +".jpg)"; }, 1000); } </script> </head> <body onload="cycleImages()"> <div id="cycleBackground" class="b"> </div> </body> </html> Код только для проверки с тремя картинками back1.jpg, back2.jpg, back3.jpg. Я думаю по аналогии легко переделать под вашу задачу. |
<body onload="img_b()"> попробуй
Цитата:
|
Попробовал через Id, все получилось.
Но, возникла маленькая мелочь: При загрузке страницы отображается имидж, который мы определили в стиле (если не определили пустота), т.е. имидж1, потом задержка больше чем определено в скрипте (1 секунда) и отображение имиджа2 и т.д.. Чем вызвана задержка? |
Потому что у вас скрипт первый раз устанавливает то изображение, которое уже установлено стилем.
|
Да нет, я установил на следующее значение, т.е. в скрипте первый имидж2.
Но задержка есть, на глаз 1 секунда |
Часовой пояс GMT +3, время: 04:36. |