Показать сообщение отдельно
  #1 (permalink)  
Старый 08.05.2015, 08:46
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

Смен картинок с плавным переходом
Здравствуйте Всем, я лазия по форуму нашел код который мне подходит но мне не хватает мягкого перехода между картинками я как понял это делается через "show"

В общем ребя мож подскажите как сделать плавный переход потухания и появления картинки

<a onclick="next()"><img src="/img/H1.jpg" alt="" id="foto" ></a>


var arr = ["H1.jpg", "H2.jpg", "H3.jpg"];   // имена картинок
var path = "/img/"; // каталог, где лежат картинки.
var i = 0 // индекс текущего изображения.
var img = "foto";// id картинки, которая будет меняться
img = document.getElementById(img);
var next = function() {
   
    $("#foto").css("opacity", "0.0").css("transition","1.5s").css("-webkit-transition","1.5s").css("-o-transition","1.5s").css("-moz-transition","1.5s");
    img.src = path+arr[i];
    i = ++i%arr.length;
    //$('#foto').css({opacity: 1.0});
    $("#foto").css("opacity", "1.0").css("transition","1.5s").css("-webkit-transition","1.5s").css("-o-transition","1.5s").css("-moz-transition","1.5s");

}

setInterval(function(){next()},8000);
next()
Ответить с цитированием