Автоматическая смена картинок через заданное время
Здравствуйте. Прошу помощи вот с какой проблемой, есть в 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> Он работает так как нужно, но код очень грубый и было бы отлично, если бы вы смогли оптимизировать его и соответственно переделать по дивы. Тому, кто поможет, буду ОЧЕНЬ благодарен. |
Работу кода не стал просматривать подробнее, просто сделал с циклами.
<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>
|
Что-то оно не хочет работать :(
Попробовал сделать так, но ничего не получилось:
<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, ник у вас что надо: полностью соответствует действительности:) Код - ересь полнейшая! Но главное, что я лично не понял, нафига весь этот код:) Почему нельзя просто через
setTimeout(function(){ div.style.background = "url('...')" }, 1000)
??? |
Цитата:
Есть первый див с фоновым рисунком. Есть второй див с фоновым рисунком. Через определенное время,к примеру 10 сек, фоновый рисунок первого дива меняется на второй, допустим на 1 сек, после чего возвращается первый рисунок и все опять повторяется? :) |
Например, так:
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, может человек нашёл код на просторах интернета:)
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
И здесь не забудьте поправить div1 = document.getElementById('div1'), div2 = document.getElementById('div2') |
Цитата:
|
Цитата:
|
herotic, очевидно, что яваскрипт вы не знаете вообще. Первый скрипт не менял style.background у div'а, как оно нужно вам. Он менял .src у первой картинки (<img>). Ну и чтобы поставить точку: вы знаете, что значит getElementById??? Если нет, то либо сделайте заказ в разделе работа, либо заведите фиктивную дружбу с программистом: пейте пиво, разговаривайте за жизнь, а через полгодика спроси у него, как это сделать. Он сделает, а ты скажи: "Не друг ты мне! Я использовал тебя в своих целях и добился своего! теперь иди на!..."
|
Цитата:
|
Рабочий код, может кому-нибудь пригодиться:
<script>
var url1 = 'images/1.png', url2 = 'images/2.png'
setInterval( function(){
document.getElementById('div').style.background = "url('"+url2+"')"
setTimeout( function(){
document.getElementById('div').style.background = "url('"+url1+"')"
}, 1000)
}, 11000)
</script>
|
Цитата:
Цитата:
Цитата:
setInterval( function(){
document.getElementById('div').style.background = "url('images/1.png')"
setTimeout( function(){
document.getElementById('div').style.background = "url('images/2.png')"
}, 1000)
}, 11000)
|
Sweet, в твоем коде я убрал переменную div1 из-за нее ругался браузер и почему-то не работал, хоть и должен был. И убрал переменную div2, потому как она вообще не нужно. После исправления начал работать хотя я сам и не понял почему. Спасибо за помощь :)
|
Ув. форумчане, помогите пожалуйста найти ошибку. Код работает как надо, но при первой загрузке страницы первое изображение чуть подвисает, затем мигает последнее, затем цикл идёт нормально с плавными переходами и прочее. Если обновить страницу всё повторяется сначала. Помогите устранить ошибку с заминкой при первой загрузке.Сразу скажу, код не мой, пытался переделать найденный.С javascript знаком довольно посредственно.Заранее спасибо, вот код
<script type="text/javascript">// <![CDATA[ var image_count = 5; var interval = 5000; var time_out = 15; var i = 0; var timeout; var opacity = 100; function change_image() { opacity--; var j = i + 1; var current_image = 'img_' + i; if (i == image_count) j = 1; var next_image = 'img_' + j; document.getElementById(current_image).style.opaci ty=opacity/100; document.getElementById(current_image).style.filte r='alpha(opacity='+opacity+')'; document.getElementById(next_image).style.opacity= (100-opacity)/100; document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')'; timeout = setTimeout("change_image()", time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval); // ]]></script> и ХТМЛ <div id="header" class="div"> <img src="2.jpg" id="img_1" style="position:absolute; " /> <img src="3.jpg" id="img_2" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /> <img src="4.jpg" id="img_3" style="position:absolute; " /> <img src="5.jpg" id="img_4" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /> <img src="1.jpg" id="img_5" style="position:absolute; " /> </div> |
Kristobal Hunta, поставте скрипт после картинок
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Прошу прощения, учту на будущее. Так вот:
<script type="text/javascript">// <![CDATA[
var image_count = 5;
var interval = 5000;
var time_out = 15;
var i = 0;
var timeout;
var opacity = 100;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity= (100-opacity)/100;
document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
*!*
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
*/!*
}
setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
// ]]></script>
Без оператора if (подсвеченный) глюк с заминкой исчезает, но вместе с плавными переходами:) , возможно ошибка в условии? и ХТМЛ <div id="header" class="div"> <img src="2.jpg" id="img_1" style="position:absolute; " /> <img src="3.jpg" id="img_2" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /> <img src="4.jpg" id="img_3" style="position:absolute; " /> <img src="5.jpg" id="img_4" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /> <img src="1.jpg" id="img_5" style="position:absolute; " /> </div> |
Kristobal Hunta,
пауза возникает потому что первый раз смена сработает через 5 сек. Вариант смены сразу...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
img{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="header" class="div">
<img src="http://wap.unsveta.com/images/2163cy320x480.jpg" id="img_1" style="position:absolute; " />
<img src="http://img0.liveinternet.ru/images/attach/b/3/14/277/14277320_lotos4.jpg" id="img_2" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<img src="http://www.corporacia.ru/_data/content/0000593/corporacia.ru.000035.jpg" id="img_3" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<img src="http://img.galya.ru/galya.ru/Pictures2/ttp/2009/06/06/1294186.jpg" id="img_4" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<img src="http://i032.radikal.ru/0712/f1/9e278e7f8393.jpg" id="img_5" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
</div>
<script type="text/javascript">
var image_count = 5;
var interval = 5000; //пауза
var time_out = 15; //скорость смены картинки
var i = 5;
var timeout;
var opacity = 100;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity= (100-opacity)/100;
document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
i++;
if (i>image_count) i=1;
timeout = setTimeout("change_image()", interval);
}
}
change_image()
</script>
</body>
</html>
|
Огромное спасибо, теперь работает как надо!
|
А подскажите, пожалуйста. как сделать так, чтобы при загрузке страницы первое действие было не смена картинки, а стояло бы первое изображение , которое заданное время не менялось?
|
Ahterknica,
пост 23 - 47 строку заменить копией 44 и в 5 строке поставить вместо 5 - 1 |
спасибо. получилось)
|
Почему скорость смены картинки зависит от её разрешения? как можно модернизировать смену картинок, чтобы изображения на весь экран менялись достаточно быстро?
|
Доброго времени суток! Ув. можете подсказать как использовать этот же скрипт для 2 наборов картинок в пределах одной страницы. У меня не получилось, при разных id картинок код работает только для одного набора.Можно ли его каким-либо образом "экранировать " для работы только в пределах одного <div>-блока? Заранее благодарю!
|
Kristobal Hunta,
самое простое придумать всем переменным, функции и разным id своим имена. |
<div id="r_def">
<div id="right" class="div">
<img src="images/r_2.jpg" id="imj_1" style="position:absolute; opacity_r: 0; filter: alpha(opacity_r=0);" />
<img src="images/r_3.jpg" id="imj_2" style="position:absolute;opacity_r: 0; filter: alpha(opacity_r=0); " />
<img src="images/r_4.jpg" id="imj_3" style="position:absolute;opacity_r: 0; filter: alpha(opacity_r=0); " />
<img src="images/r_5.jpg" id="imj_4" style="position:absolute;opacity_r: 0; filter: alpha(opacity_r=0); " />
<img src="images/r_1.jpg" id="imj_5" style="position:absolute;opacity_r: 0; filter: alpha(opacity_r=0); " />
</div>
<script type="text/javascript">
var image_count_r = 15;
var interval_r = 5000; //пауза
var time_out_r = 15; //скорость смены картинки
var i_r = 15;
var timeout_r;
var opacity_r = 100;
function change_image_r() {
opacity_r--;
var j_r = i_r + 1;
var current_image_r = 'imj_' + i_r;
if (i_r == image_count_r) j_r = 1;
var next_image_r = 'imj_' + j_r;
document.getElementById(current_image_r).style.opacity_r=opacity_r/100;
document.getElementById(current_image_r).style.filter='alpha(opacity_r='+opacity_r+')';
document.getElementById(next_image_r).style.opacity_r= (100-opacity)/100;
document.getElementById(next_image_r).style.filter=' alpha(opacity_r='+(100-opacity_r)+')';
timeout_r = setTimeout("change_image_r()", time_out_r);
if (opacity_r==1) {
opacity_r = 100;
clearTimeout(timeout_r);
i_r++;
if (i_r>image_count_r) i_r=11;
timeout_r = setTimeout("change_image_r()", interval_r);
}
}
change_image_r()
</script>
<div id="right_1" class="div">Правая колонка Меню Меню Меню Меню</div>
</div>
Вроде всё сменил, а смена не работает, в чём моя ошибка? |
Цитата:
|
Цитата:
Цитата:
|
Спасибо огромное, наконец разобрался, всё работает как надо!
|
автоматическая смена картинок с opacity
Добавлена смена href и title для перехода по видимой картинке ... строки 26 и 52,53 ... target="_blank" добавить по желанию ... количество ссылок и подсказок должно быть равно количеству картинок
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
img{
width: 300px;
height: 200px;
}
a img{
cursor: pointer;
}
</style>
</head>
<body>
<div id="header" >
<img src="http://12polos.ru/wp-content/uploads/2013/03/1363581103_1741.jpg" id="img_1" style="position:absolute; " />
<img src="http://img0.liveinternet.ru/images/attach/b/3/14/277/14277320_lotos4.jpg" id="img_2" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<img src="http://www.corporacia.ru/_data/content/0000593/corporacia.ru.000035.jpg" id="img_3" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<img src="http://img.galya.ru/galya.ru/Pictures2/ttp/2009/06/06/1294186.jpg" id="img_4" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
<a href="http://ya/" id="go" title="ya" ><img src="http://i032.radikal.ru/0712/f1/9e278e7f8393.jpg" id="img_5" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a>
</div>
<script type="text/javascript">
var image_count = 5;
var interval = 1000; //пауза
var time_out = 15; //скорость смены картинки
var i = 5;
var timeout;
var opacity = 100;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity= (100-opacity)/100;
document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
i++;
if (i>image_count) i=1;
document.getElementById('go').href = ["http://ya.ru/","http://javascript.ru/","http://javascript.ru/","http://javascript.ru/","http://javascript.ru/"][i-1]
document.getElementById('go').title = ["яндекс","http://javascript.ru/","http://javascript.ru/","http://javascript.ru/","http://javascript.ru/"][i-1]
timeout = setTimeout("change_image()", interval);
}
}
change_image()
</script>
</body>
</html>
|
Спасибо большое, но когда я добавил ссылки , у меня перестали меняться картинки. Может подскажите, что я не так сделал.
<!DOCTYPE HTML> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> img{ width: 645px; height: 353px; } a img{ cursor: pointer; } </style> </head> <body> <div id="header" > <img src="http://aksmoney.com/images/mag/1.png" id="img_1" style="position:absolute; width:645px; height:353px" /> <img src="http://aksmoney.com/images/mag/2.png" id="img_2" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/3.png" id="img_3" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/4.png" id="img_4" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/5.png" id="img_5" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/6.png" id="img_6" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/7.png" id="img_7" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/8.png" id="img_8" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <img src="http://aksmoney.com/images/mag/9.png" id="img_9" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /> <a href="http://alipromo.com/redirect/cpa/o/6c32355cccda19eca697d3f6b8c40947" id="go" title="Moda" ><img src="http://aksmoney.com/images/mag/1.png" id="img_1" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/7415b125ad36017d4f0c0f5181bc8b52" id="go" title="Krasota" ><img src="http://aksmoney.com/images/mag/2.png" id="img_2" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/4b82fc862f2878bb0d1c87749c1ce637" id="go" title="Smartfon" ><img src="http://aksmoney.com/images/mag/3.png" id="img_3" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://ru.itao.com/c/amelieitao?tracelog=itao_aenew" target="_blank" id="go" title="Konkurs" ><img src="http://aksmoney.com/images/mag/4.png" id="img_4" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/0b15c84c040858461d5b9d57170f7be5" id="go" title="Amelie" ><img src="http://aksmoney.com/images/mag/5.png" id="img_5" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/0731978897c1fcbaeb5be43699cb6d52" id="go" title="Podarki" ><img src="http://aksmoney.com/images/mag/6.png" id="img_6" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/b6c342a76c803bb18ced534ffa90ec61" id="go" title="Electrnika" ><img src="http://aksmoney.com/images/mag/7.png" id="img_7" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/d606c61078751f6c75f314ed28da65a0" id="go" title="Sport" ><img src="http://aksmoney.com/images/mag/8.png" id="img_8" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> <a href="http://alipromo.com/redirect/cpa/o/37922acb8e8688a83b2e6ac8e1993ff0" id="go" title="Expert" ><img src="http://aksmoney.com/images/mag/9.png" id="img_9" style="position:absolute;opacity: 0; filter: alpha(opacity=0); " /></a> </div> <script type="text/javascript"> var image_count = 9; var interval = 1000; //пауза var time_out = 15; //скорость смены картинки var i = 5; var timeout; var opacity = 100; function change_image() { opacity--; var j = i + 1; var current_image = 'img_' + i; if (i == image_count) j = 1; var next_image = 'img_' + j; document.getElementById(current_image).style.opaci ty=opacity/100; document.getElementById(current_image).style.filte r='alpha(opacity='+opacity+')'; document.getElementById(next_image).style.opacity= (100-opacity)/100; document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')'; timeout = setTimeout("change_image()", time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); i++; if (i>image_count) i=1; document.getElementById('go').href = ["http://alipromo.com/redirect/cpa/o/6c32355cccda19eca697d3f6b8c40947","http://alipromo.com/redirect/cpa/o/7415b125ad36017d4f0c0f5181bc8b52","http://alipromo.com/redirect/cpa/o/4b82fc862f2878bb0d1c87749c1ce637","http://ru.itao.com/c/amelieitao?tracelog=itao_aenew" target="_blank","http://alipromo.com/redirect/cpa/o/0b15c84c040858461d5b9d57170f7be5","http://alipromo.com/redirect/cpa/o/0731978897c1fcbaeb5be43699cb6d52","http://alipromo.com/redirect/cpa/o/b6c342a76c803bb18ced534ffa90ec61","http://alipromo.com/redirect/cpa/o/d606c61078751f6c75f314ed28da65a0","http://alipromo.com/redirect/cpa/o/37922acb8e8688a83b2e6ac8e1993ff0"][i-1] document.getElementById('go').title = ["Moda","Krasota","Smartfon","Konkurs","Amelie","Po darki","Electrnika","Sport","Expert"][i-1] timeout = setTimeout("change_image()", interval); } } change_image() </script> </body> </html> |
alsgenie,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
alsgenie,
а не проще вам нормальный слайдер поставить?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
img{
width: 645px;
height: 353px;
}
a img{
cursor: pointer;
}
</style>
</head>
<body>
<div id="header" >
<img src="http://aksmoney.com/images/mag/1.png" id="img_1" style="position:absolute; width:645px; height:353px" />
<img src="http://aksmoney.com/images/mag/2.png" id="img_2" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/3.png" id="img_3" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/4.png" id="img_4" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/5.png" id="img_5" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/6.png" id="img_6" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/7.png" id="img_7" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<img src="http://aksmoney.com/images/mag/8.png" id="img_8" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " />
<a href="http://alipromo.com/redirect/cpa/o/6c32355cccda19eca697d3f6b8c40947" id="go" title="Moda" ><img src="http://aksmoney.com/images/mag/9.png" id="img_9" style="position:absolute; width:645px;opacity: 0; filter: alpha(opacity=0); height:353px " /></a>
</div>
<script type="text/javascript">
var image_count = 9;
var interval = 1000; //пауза
var time_out = 15; //скорость смены картинки
var i = 5;
var timeout;
var opacity = 100;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity= (100-opacity)/100;
document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
i++;
if (i>image_count) i=1;
document.getElementById('go').href = ["http://alipromo.com/redirect/cpa/o/6c32355cccda19eca697d3f6b8c40947","http://alipromo.com/redirect/cpa/o/7415b125ad36017d4f0c0f5181bc8b52","http://alipromo.com/redirect/cpa/o/4b82fc862f2878bb0d1c87749c1ce637","http://ru.itao.com/c/amelieitao?tracelog=itao_aenew","http://alipromo.com/redirect/cpa/o/0b15c84c040858461d5b9d57170f7be5","http://alipromo.com/redirect/cpa/o/0731978897c1fcbaeb5be43699cb6d52","http://alipromo.com/redirect/cpa/o/b6c342a76c803bb18ced534ffa90ec61","http://alipromo.com/redirect/cpa/o/d606c61078751f6c75f314ed28da65a0","http://alipromo.com/redirect/cpa/o/37922acb8e8688a83b2e6ac8e1993ff0"][i-1]
document.getElementById('go').title = ["Moda","Krasota","Smartfon","Konkurs","Amelie","Po darki","Electrnika","Sport","Expert"][i-1]
timeout = setTimeout("change_image()", interval);
}
}
change_image()
</script>
</body>
</html>
|
Спасибо большое! Все заработало!
И еще один вопрос, а можно ли на одной странице применять такой код (с другими картинками и ссылками)? |
код продублировать можно если обернуть в анонимную функцию и другое id для картинок ... но для начала я бы вам рекомендовал изучить основы
|
| Часовой пояс GMT +3, время: 07:43. |