Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.08.2008, 15:52
Aimless
 
Сообщений: n/a

Изменение имиджа по таймеру с помощью 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>

Последний раз редактировалось Андрей Параничев, 15.08.2008 в 16:42.
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2008, 16:40
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

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);
}


а что хоть за проблема в ФФ?
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2008, 16:52
Aimless
 
Сообщений: n/a

Цель скрипта, показ через указанный таймаут разных имиджей, т.е. сначала идидж1, потом имидж2 и т.д..
В ие скрипт работает и имиджи меняются по таймеру, а в фф отображается имидж1 и никакого изменения
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2008, 17:11
Aimless
 
Сообщений: n/a

Надо сказать, что и подправленный Вами скрипт в фф также не отображает имиджи
Ответить с цитированием
  #5 (permalink)  
Старый 15.08.2008, 17:22
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

ну так я ничего и не исправлял, я просто переписал получше

проверил - скрипт работает, картинка меняется

Последний раз редактировалось Андрей Параничев, 15.08.2008 в 17:28.
Ответить с цитированием
  #6 (permalink)  
Старый 15.08.2008, 17:25
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Попробуйте менять только свойство 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">
		&nbsp;
	</div>
</body>
</html>

Код только для проверки с тремя картинками back1.jpg, back2.jpg, back3.jpg.
Я думаю по аналогии легко переделать под вашу задачу.
Ответить с цитированием
  #7 (permalink)  
Старый 15.08.2008, 17:27
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

<body onload="img_b()"> попробуй

Сообщение от Андрей Параничев Посмотреть сообщение
Попробуйте менять только свойство backgroundImage, у меня работает:
У меня и так работает прекрасно...
Ответить с цитированием
  #8 (permalink)  
Старый 15.08.2008, 17:49
Aimless
 
Сообщений: n/a

Попробовал через Id, все получилось.
Но, возникла маленькая мелочь:
При загрузке страницы отображается имидж, который мы определили в стиле (если не определили пустота), т.е. имидж1, потом задержка больше чем определено в скрипте (1 секунда) и отображение имиджа2 и т.д..
Чем вызвана задержка?
Ответить с цитированием
  #9 (permalink)  
Старый 15.08.2008, 17:51
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Потому что у вас скрипт первый раз устанавливает то изображение, которое уже установлено стилем.
Ответить с цитированием
  #10 (permalink)  
Старый 15.08.2008, 17:55
Aimless
 
Сообщений: n/a

Да нет, я установил на следующее значение, т.е. в скрипте первый имидж2.
Но задержка есть, на глаз 1 секунда
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли с помощью javascript создать онлайн(ролевую) игру? eXiN Общие вопросы Javascript 7 23.06.2009 20:57
Выпадающее меню на css и javascript Jackky Общие вопросы Javascript 3 13.09.2008 18:30
Изменение onClick из Javascript Александр Events/DOM/Window 5 01.05.2008 16:44
javascript, css и iexplorer Блондинко Internet Explorer 4 21.02.2008 12:39
Скроллирование окна браузера с помощью JavaScript. lancer Элементы интерфейса 1 19.02.2008 23:16