22.07.2010, 14:48
|
|
Интересующийся
|
|
Регистрация: 22.07.2010
Сообщений: 12
|
|
|
Автоматическая смена картинок через заданное время
Здравствуйте. Прошу помощи вот с какой проблемой, есть в CSS одна картинка как фон дива, и есть другая, тоже как фон другого дива. Скажите, пожалуйста, как можно сделать с помощью яваскрипт или каким-либо другими методами так, чтобы вторая картинка как бы мелькнула на первой картинке допустим на пол секунды? А после этого, чтобы этот процесс повторился.
У меня есть код:
<script language="JavaScript">
i=0;
img_a=new Array()
img_h=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[3]=new Image()
img_a[4]=new Image()
img_a[5]=new Image()
img_a[6]=new Image()
img_a[7]=new Image()
img_a[8]=new Image()
img_a[9]=new Image()
img_a[10]=new Image()
img_a[11]=new Image()
img_a[12]=new Image()
img_a[13]=new Image()
img_a[14]=new Image()
img_a[15]=new Image()
img_a[16]=new Image()
img_a[17]=new Image()
img_a[18]=new Image()
img_a[19]=new Image()
img_a[20]=new Image()
img_a[21]=new Image()
img_a[22]=new Image()
img_a[23]=new Image()
img_a[24]=new Image()
img_a[25]=new Image()
img_a[26]=new Image()
img_a[27]=new Image()
img_a[28]=new Image()
img_a[0].src="1.jpg"
img_a[1].src="1.jpg"
img_a[2].src="1.jpg"
img_a[3].src="1.jpg"
img_a[4].src="1.jpg"
img_a[5].src="1.jpg"
img_a[6].src="1.jpg"
img_a[7].src="1.jpg"
img_a[8].src="1.jpg"
img_a[9].src="1.jpg"
img_a[10].src="1.jpg"
img_a[11].src="1.jpg"
img_a[12].src="1.jpg"
img_a[13].src="1.jpg"
img_a[14].src="1.jpg"
img_a[15].src="1.jpg"
img_a[16].src="1.jpg"
img_a[17].src="1.jpg"
img_a[18].src="1.jpg"
img_a[19].src="1.jpg"
img_a[20].src="1.jpg"
img_a[21].src="1.jpg"
img_a[22].src="1.jpg"
img_a[23].src="1.jpg"
img_a[24].src="1.jpg"
img_a[25].src="1.jpg"
img_a[26].src="1.jpg"
img_a[27].src="1.jpg"
img_a[28].src="2.jpg"
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function img_b()
{
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
i++
if(i>28) i=0;
setTimeout("img_b()", getRandomInt(1000, 10000))
}
</script>
<body onLoad=img_b()>
<img src="1.jpg"><br>
</body>
Он работает так как нужно, но код очень грубый и было бы отлично, если бы вы смогли оптимизировать его и соответственно переделать по дивы. Тому, кто поможет, буду ОЧЕНЬ благодарен.
|
|
22.07.2010, 15:02
|
 |
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
Работу кода не стал просматривать подробнее, просто сделал с циклами.
<script language="JavaScript">
b=0;
img_a=new Array()
img_h=new Array()
for(j=0; j>28; j++){
img_a[i]=new Image();
if(j<=27){
img_a[i].src="1.jpg";} else {img_a[i].src="2.jpg";}}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;}
function img_b() {
for(i=0; i>28; i++){
document.images[0].src=img_a[i].src}
b++;
if(b>28) b=0;
setTimeout("img_b()", getRandomInt(1000, 10000)) }
</script>
<body onLoad=img_b()>
<img src="1.jpg"><br>
</body>
Последний раз редактировалось Vulkan, 22.07.2010 в 15:10.
Причина: Чуть поправил.
|
|
22.07.2010, 15:21
|
|
Интересующийся
|
|
Регистрация: 22.07.2010
Сообщений: 12
|
|
Что-то оно не хочет работать 
Попробовал сделать так, но ничего не получилось:
<script language="JavaScript">
b=0;
img_a=new Array()
img_h=new Array()
for(i=0; i>7; i++){
img_a[i]=new Image();
img_a[i].src="1.jpg";
}
img_a[8]=new Image();
img_a[8].src="2.jpg";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;}
function img_b() {
for(j=0; j>8; j++){
document.images[0].src=img_a[i].src}
b++;
if(b>8) b=0;
setTimeout("img_b()", getRandomInt(100, 110)) }
</script>
Последний раз редактировалось herotic, 22.07.2010 в 15:35.
Причина: Добавил
|
|
22.07.2010, 16:00
|
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
herotic, ник у вас что надо: полностью соответствует действительности  Код - ересь полнейшая! Но главное, что я лично не понял, нафига весь этот код Почему нельзя просто через
setTimeout(function(){ div.style.background = "url('...')" }, 1000)
???
|
|
22.07.2010, 16:09
|
|
Интересующийся
|
|
Регистрация: 22.07.2010
Сообщений: 12
|
|
Сообщение от Sweet
|
herotic, ник у вас что надо: полностью соответствует действительности Код - ересь полнейшая! Но главное, что я лично не понял, нафига весь этот код Почему нельзя просто через
setTimeout(function(){ div.style.background = "url('...')" }, 1000)
???
|
А как тогда Вашим кодом сделать например так:
Есть первый див с фоновым рисунком.
Есть второй див с фоновым рисунком.
Через определенное время,к примеру 10 сек, фоновый рисунок первого дива меняется на второй, допустим на 1 сек, после чего возвращается первый рисунок и все опять повторяется? |
|
22.07.2010, 16:45
|
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
Например, так:
var url1 = '...', url2 = '...',
div1 = document.getElementById('div1'), div2 = document.getElementById('div2')
setInterval( function(){
div1.style.background = "url('"+url2+"')"
setTimeout( function(){
div1.style.background = "url('"+url1+"')"
}, 1000)
}, 11000)
|
|
22.07.2010, 17:05
|
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
|
Кстати, повникал в первоначальный код.. Это пздц!!! Ничего глупее я бы не смог придумать даже если бы мне дали стоПицот тыщ денег за самый глупый код.. Может программирование - не ваше???
|
|
22.07.2010, 17:12
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
Sweet, может человек нашёл код на просторах интернета
|
|
22.07.2010, 17:17
|
|
Интересующийся
|
|
Регистрация: 22.07.2010
Сообщений: 12
|
|
|
Сообщение от Sweet
|
Например, так:
var url1 = '...', url2 = '...',
div1 = document.getElementById('div1'), div2 = document.getElementById('div2')
setInterval( function(){
div1.style.background = "url('"+url2+"')"
setTimeout( function(){
div1.style.background = "url('"+url1+"')"
}, 1000)
}, 11000)
|
То ли я его как-то неправильно заюзал, то ли он не рабочий. Если он работает, скажите, пожалуйста, как его правильно привязать к хтмлу?
|
Сообщение от Sweet
|
|
Кстати, повникал в первоначальный код.. Это пздц!!! Ничего глупее я бы не смог придумать даже если бы мне дали стоПицот тыщ денег за самый глупый код.. Может программирование - не ваше???
|
Я просто реализовал то, что мне было нужно кодом, который нашел в интернете, изначально он просто показывал картинки с интервалом в 1 секунду. Буду учиться правильным стилем программировать |
|
22.07.2010, 17:19
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
|
Сообщение от herotic
|
|
То ли я его как-то неправильно заюзал, то ли он не рабочий. Если он работает, скажите, пожалуйста, как его правильно привязать к хтмлу?
|
Вы в переменные url1 и url2 свои данные подставили? |
|
|
|
