Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоматическая смена картинок через заданное время (https://javascript.ru/forum/dom-window/10822-avtomaticheskaya-smena-kartinok-cherez-zadannoe-vremya.html)

Kristobal Hunta 23.02.2013 00:42 
<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>


Вроде всё сменил, а смена не работает, в чём моя ошибка?

рони 24.02.2013 11:52
Цитата:
Сообщение от Kristobal Hunta
(100-opacity)/100;
тут ещё

рони 24.02.2013 11:52
Цитата:
Сообщение от Kristobal Hunta
style.opacity_r
Цитата:
Сообщение от Kristobal Hunta
alpha(opacity_r=
а тут нетрогать везде

Kristobal Hunta 26.02.2013 01:11
Спасибо огромное, наконец разобрался, всё работает как надо!

рони 16.12.2014 22:09
автоматическая смена картинок с 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>

alsgenie 17.12.2014 10:37
Спасибо большое, но когда я добавил ссылки , у меня перестали меняться картинки. Может подскажите, что я не так сделал.
<!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>

рони 17.12.2014 10:40
alsgenie,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 17.12.2014 10:47
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>

alsgenie 17.12.2014 11:13
Спасибо большое! Все заработало!
И еще один вопрос, а можно ли на одной странице применять такой код (с другими картинками и ссылками)?

рони 17.12.2014 12:00
код продублировать можно если обернуть в анонимную функцию и другое id для картинок ... но для начала я бы вам рекомендовал изучить основы


Часовой пояс GMT +3, время: 22:29.
Страница 4 из 5 « Первая < 23 4 5 >
Показывать 40 сообщений этой темы на одной странице