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

Question

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

0

Я использую jquery для создания ротатора изображений. Здесь я нашел код ниже: Как угасать фоновые изображения галереи циклы, но мне было интересно, есть ли способ, который он может исчезать от одного изображения к другому, а не к белому между ними?

$(window).load(function(){

var initialBg =  $('#mydiv').css("background-image"); // added

var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
    (function recurse(counter) {
        var bgImage = arr[counter];
        if (firstTime == false) {
            $("#mydiv").fadeOut("slow", function(){
                $('#mydiv').css('background-image', bgImage); // fixed
            });
            $("#mydiv").fadeIn("slow");
        } else {
            firstTime = false;
        }               
        delete arr[counter];
        arr.push(bgImage);
        setTimeout(function() {
            recurse(counter + 1);
        }, 3600);
    })(0);      
});

user3630610 13 май 2014, в 03:41

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Drazen Bjelovuk · Answer 1 · 2014-05-13T00-00-00.000Z

Попробуйте: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Демо-версия JSFiddle

HTML:

<div id="cycler">
    <img class="active" src="image1.jpg" alt="My image" />
    <img src="image2.jpg" alt="My image" /> 
    <img src="image3.jpg" alt="My image" /> 
    <img src="image4.jpg" alt="My image" />     
</div>

CSS:

#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }

JavaScript:

function cycleImages() {
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    $next.css('z-index', 2);  //move the next image up the pile
    $active.fadeOut(1500, function() {  //fade out the top image
        $active.css('z-index', 1).show().removeClass('active');  //reset the z-index and unhide the image
        $next.css('z-index', 3).addClass('active');  //make the next image the top one
    });
}

$(document).ready(function() {
    // run every 3s
    setInterval(cycleImages, 3000);
});