VPF::непрерывная смена картинок - Форум программистов

WhizArt

Дата 7.2.2013, 15:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.2.2013

Репутация: нет
Всего: нет

есть 4 картинки.
нужно сделать непрерывную смену картинок.
так же нужно сделать возможным переход к любой из них при клике соответствующей кнопки (нажали кнопку 3 - перешли на 3 картинку)
для решения первой части нашёл готовый код, а вот функцию клика не получается написать.

Код


  var total_pics_num = 4; // колличество изображений
  var interval = 5000;    // задержка между изображениями
  var time_out = 1;       // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    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
  );

Код



<img src='images/1.jpg' id="image_1" style="position: absolute; z-index:100;" />
  <img src='images/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index: 200" />
  <img src='images/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index: 300" />
  <img src='images/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index:400" />
  <img src="/images/but1.png" />
  <img src="/images/but2.png" />
  <img src="/images/but3.png" />
  <img src="/images/but4.png" />

у меня были попытки написать отдельную функцию, но она не работает =((
помогите пожалуйста, я новичок

Это сообщение отредактировал(а) Aliance - 7.2.2013, 17:08

WhizArt

Дата 7.2.2013, 17:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.2.2013

Репутация: нет
Всего: нет

неужели никто не знает как это сделать ??

Aliance

Дата 7.2.2013, 17:50 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Тут нечего знать, потому что это не вопрос, а просьба написать за тебя скрипт.

Цитата(WhizArt @ 7.2.2013, 16:31

)

у меня были попытки написать отдельную функцию, но она не работает =((

Покажи какие попытки были.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

WhizArt

Дата 7.2.2013, 18:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.2.2013

Репутация: нет
Всего: нет

я написал такую функцию:

Код


function flade_onClick(im){ 
      var image_next = 'image_' + im; 
      var image_now = 'image_' + i;
      document.getElementById(image_now).style.opacity = 0;
      document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
      document.getElementById(image_next).style.opacity = 1;
      document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
   }

и к каждой картинке прицепил onClick="flade_onClick(соответствующий параметр)"

Это сообщение отредактировал(а) Aliance - 8.2.2013, 10:13

WhizArt

Дата 7.2.2013, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 7.2.2013

Репутация: нет
Всего: нет

но она не работает =((

Aliance

Дата 8.2.2013, 10:14 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Ну как минимум в этой функции неопределена переменная opacity. плюс хотелось бы видеть как ты "к каждой картинке прицепил onClick"

PS: пользуйся кнопкой код, не нужно его засовывать в цитату!

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »