Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2013, 01:08
Новичок на форуме
Отправить личное сообщение для WhizArt Посмотреть профиль Найти все сообщения от WhizArt
 
Регистрация: 10.09.2012
Сообщений: 1

Ротация картинок и возможность перехода по клику
Добрый вечер.
нужно сделать непрерывную ротацию 4 картинок
так же сделать возможным переход к любой из них при нажатии соответствующей кнопки.
нашёл такой вот код:
<script type="text/javascript">
 var total_pics_num = 4; // колличество изображений
  var interval = 8000;    // задержка между изображениями
  var time_out = 1;       // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  
  function fade_to_next() {
    opacity= opacity - 1;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>

<body>
 <img src='images/1.jpg' id="image_1" style="position: absolute;" />
  <img src='images/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='images/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='images/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />

так же у меня есть кнопки:
<img src="images/but_1.png" style="position: absolute;" />
<img src="images/but_2.png" style="position: absolute;" />
<img src="images/but_3.png" style="position: absolute;" />
<img src="images/but_4.png" style="position: absolute;" />
</body>

помогите мне сделать переход к сооьветствующей картинке по клику на кнопке.

З.Ы. не пинайте сильно, я совсем новичок.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможность добавления неограниченного количества блоков по клику Andrew_tl Events/DOM/Window 1 29.12.2009 02:39