Как я могу добавить событие к автоматическому вращающемуся изображению? - PullRequest
Новая
       13

Как я могу добавить событие к автоматическому вращающемуся изображению?

0 голосов
/ 05 июля 2011

Я использую следующий скрипт и последующее событие onclick. Если я использую onclick, мой вращающийся баннер теряет его и начинает показывать картинки с произвольными интервалами. Я думаю, что я должен переопределить «setTimeout» в конце первого куска кода. Вопрос как именно? 

<script language="JavaScript" type="text/javascript">
<!--
var RotatingImage1_Index = -1;
var RotatingImage1_Images = new Array();
RotatingImage1_Images[0] = ["images/ban_image1.png","",""];
<!-- 15 Images in total-->
RotatingImage1_Images[14] = ["images/ban_image2.png","",""];

function RotatingImage1ShowNext(){
RotatingImage1_Index = RotatingImage1_Index + 1;
   if (RotatingImage1_Index > 14)
   RotatingImage1_Index = 0;
   eval("document.RotatingImage1.src = RotatingImage1_Images[" + RotatingImage1_Index + "][0]");
   setTimeout("RotatingImage1ShowNext();", 4000);}
// -->
</script>
<img src="images/ban_image1.png" id="ban_img1" name="RotatingImage1">

Эта часть работает как надо. 

<div id="ban_next" align="left">
<a href="#" onclick="RotatingImage1ShowNext();return false;">
<img src="images/ban_next.png" id="ban_nxt1"></a></div>

Эта часть также работает, но только правильно, если я установил 'setTimeout' в '0'. Извините, я совершенно новичок в этом. Я смотрел на этот вопрос stackoverflow.com , но я не знаю, как реализовать это здесь.

Заранее благодарю.

Edit: Поворот изображения начинается автоматически. Он отображает новое изображение каждые 4 секунды. Изображения имеют текст на них, или лучше шутки инсайдеров. Читатели должны испытывать желание прочитать их, но если автоматическое вращение требует внимания, они должны сохранять это внимание в течение полной минуты, чтобы увидеть все изображения. Это, вероятно, долго. Поэтому я подумал реализовать кнопку, чтобы перезаписать таймер и показать следующее изображение «по щелчку». Но после щелчка время вращения должно вернуться к автоматическому вращению. Это план.

Спасибо, Прусса, а теперь пора спать, я постараюсь уловить твой ответ завтра;)

1 Ответ

0 голосов
/ 05 июля 2011

Вам не нужно eval, просто выполните document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0].

Описанное поведение происходит потому, что срабатывает более одного таймера.При первом вызове RotatingImage1ShowNext вызывается один набор, по одному каждый раз, когда он вызывается из обработчика onclick.Чтобы исправить это, объявите глобальный для вашего таймера, и перед установкой другого тайм-аута очистите его, если он установлен.Нравится: 

var global_timerid;
function RotatingImage1ShowNext(){
  //RotatingImage1_Index = RotatingImage1_Index + 1;
  //if (RotatingImage1_Index > 14) RotatingImage1_Index = 0;
  RotatingImage1_Index = (RotatingImage1_Index + 1) % RotatingImage1_Images.length;
  //document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0];
  document.getElementById('ban_img1').src = RotatingImage1_Images[RotatingImage1_Index][0];
  if (global_timerid) clearTimeout(global_timerid);
  global_timerid = setTimeout(RotatingImage1ShowNext, 4000);
}
...