0

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

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

有谁知道一个体面的滑块可以满足我上面的要求，或者至少可以帮助我完成我的建议？此外，图像将是动态的并具有透明背景。

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

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

4

2 回答 2

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。

这是一个如何在“滑块”中居中图像的示例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);
})();
于 2012-09-07T21:02:04.710 回答
1

有很多滑块供您选择。看看70+ Awesome jQuery Slider Plugins。它们中的大多数具有褪色效果。

于 2012-09-08T14:24:22.143 回答