Показать сообщение отдельно
  #35 (permalink)  
Старый 16.12.2014, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

автоматическая смена картинок с 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>
Ответить с цитированием