• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Смена изображений на JS
Смена изображений на JS
workman
Вторник, 05 Января 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Ваши изображения с установкой данного скрипта,будут плавно меняться самостоятельно.
Кстати,может подойти под рататор баннеров

Код скрипта (вставлять между тегами )
Код
<script type="text/javascript">
  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
  );
</script>
HTML код ставим поместу
Код
<div>
  <img src='1.jpg' id="image_1" style="position: absolute;" />
  <img src='2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>
Страна: (RU)
workman
Вторник, 05 Января 2016 | Сообщение 2
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Trantel ()
Этот скрипт можно на кино сайт как понимаю установит, чтоб афишу крутил.

Да куда угодно можно пихать ... Каждый думками богат. Мое дело выложить и если что объяснить что и куда.
Страна: (RU)
FeStemBer
Четверг, 07 Января 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:355
Награды: 1
А можно скрин на скрипт, то в поиске поискал, не чего близко не нашел.
Страна: (RU)
Kvint
Четверг, 07 Января 2016 | Сообщение 4
Оффлайн
Пользователи
Сообщений:83
Награды: 0
Но это что то близко к слайдеру, только можно сделать также на отдельной странице.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Смена изображений на JS
  • Страница 1 из 1
  • 1
Поиск: