Question

我正在使用jquery来创建一个图像旋转器。我在这里找到了以下代码：How to fade loop gallery background images 但我想知道是否有一种方法可以从一张图片淡入下一张图片而不是白色介于两者之间？

$(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);      
});

Answer 1

尝试一下：http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

JSFiddle demo

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);
});

如何让jquery旋转器从一个图像淡入下一个图像？

1 个答案: