javascript - jQuery slider 淡入淡出

Question

我正在寻找一个像样的 jQuery slider 。我希望在过渡阶段，图像会逐渐消失、隐藏，然后在下一个图像中淡出。像这样:http://i47.tinypic.com/6gygko.gif

现在我正在使用 Plus Slider，但它在转换过程中并没有完全隐藏图像。相反，它会加载下一个图像，并在显示第二个图像时隐藏它。看到这个:http://jsfiddle.net/EgkFq

有谁知道有一个像样的 slider 可以满足我上面的要求，或者至少可以帮助我用 fiddle 来做我所建议的事情？此外，图像将是动态的并且具有透明背景。

此外，我想要数字分页，因此只有单击数字才能进行转换。有人告诉我必须使用 jQuery 来检测有多少图像等。

除了滚动条问题外，其他问题都已解决。 http://jsfiddle.net/h7Y3F

Answer 1

http://jsfiddle.net/EgkFq/5/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = 0;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        $(slides[currentIndex ]).fadeOut(fadeDuration);
        $(slides[nextIndex ]).fadeIn(fadeDuration);

        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, timePerSlide);
})();

插件 shmugin。

以下是如何将图像在“ slider ”中居中的示例 http://jsfiddle.net/EgkFq/9/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = -1;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        var me = $(slides[currentIndex]);
        var nxt = $(slides[nextIndex]);

        var w = nxt.width();
        var h = nxt.height();        

        me.fadeOut(fadeDuration);
        nxt.fadeIn(fadeDuration);

        nxt.css({
            "left":"50%", 
            "margin-left":w/2 * -1, 
            "top":"50%", 
            "margin-top": h/2 * -1
        });


        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, 0);
})();