Изменение имиджа по таймеру с помощью 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, время: 22:59. |