Question

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

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

有没有人知道一个像我上面所说的那样的滑块，或者至少帮助我做小提琴做我的建议？此外，图像将是动态的，并具有透明背景。

此外，我想要数字分页，所以只有点击数字才能进行转换。我被告知我必须使用jQuery来检测有多少图像等。

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

Answer 1

(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。

以下是如何在“滑块”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);
})();

Answer 2

有很多滑块供您选择。看看 70+ Awesome jQuery Slider Plugins 。大多数都有褪色效果。

jQuery Slider Fade

2 个答案: