Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 09.02.2013, 19:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,086

Kristobal Hunta, поставте скрипт после картинок
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #22 (permalink)  
Старый 09.02.2013, 21:02
Новичок на форуме
Отправить личное сообщение для Kristobal Hunta Посмотреть профиль Найти все сообщения от Kristobal Hunta
 
Регистрация: 09.02.2013
Сообщений: 6

Прошу прощения, учту на будущее. Так вот:
<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>
Ответить с цитированием
  #23 (permalink)  
Старый 09.02.2013, 21:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,086

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>

Последний раз редактировалось рони, 09.02.2013 в 21:51.
Ответить с цитированием
  #24 (permalink)  
Старый 11.02.2013, 00:12
Новичок на форуме
Отправить личное сообщение для Kristobal Hunta Посмотреть профиль Найти все сообщения от Kristobal Hunta
 
Регистрация: 09.02.2013
Сообщений: 6

Огромное спасибо, теперь работает как надо!
Ответить с цитированием
  #25 (permalink)  
Старый 13.02.2013, 15:14
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

А подскажите, пожалуйста. как сделать так, чтобы при загрузке страницы первое действие было не смена картинки, а стояло бы первое изображение , которое заданное время не менялось?
Ответить с цитированием
  #26 (permalink)  
Старый 13.02.2013, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,086

Ahterknica,
пост 23 - 47 строку заменить копией 44 и в 5 строке поставить вместо 5 - 1
Ответить с цитированием
  #27 (permalink)  
Старый 13.02.2013, 15:46
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

спасибо. получилось)
Ответить с цитированием
  #28 (permalink)  
Старый 15.02.2013, 11:18
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

Почему скорость смены картинки зависит от её разрешения? как можно модернизировать смену картинок, чтобы изображения на весь экран менялись достаточно быстро?
Ответить с цитированием
  #29 (permalink)  
Старый 22.02.2013, 01:42
Новичок на форуме
Отправить личное сообщение для Kristobal Hunta Посмотреть профиль Найти все сообщения от Kristobal Hunta
 
Регистрация: 09.02.2013
Сообщений: 6

Доброго времени суток! Ув. можете подсказать как использовать этот же скрипт для 2 наборов картинок в пределах одной страницы. У меня не получилось, при разных id картинок код работает только для одного набора.Можно ли его каким-либо образом "экранировать " для работы только в пределах одного <div>-блока? Заранее благодарю!
Ответить с цитированием
  #30 (permalink)  
Старый 22.02.2013, 08:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,086

Kristobal Hunta,
самое простое придумать всем переменным, функции и разным id своим имена.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фото заменяется через заданное время writer_88 Общие вопросы Javascript 2 21.07.2010 10:49
Смена картинок с ссылкой hk80 Общие вопросы Javascript 3 08.04.2010 16:09
Повторное действие скрипта через определенное время fortitudo jQuery 8 27.01.2010 05:00
Автоматическая смена ссылок peter888 Элементы интерфейса 18 28.07.2009 09:15
смена цвета через определенное время niculins Общие вопросы Javascript 2 14.11.2008 16:01