使用jQuery旋转图像客户端

时间:2009-07-21 18:33:19

标签: jquery image rotation

是否有一个好的jQuery插件来旋转图像?寻找稳定的东西。

3 个答案:

答案 0 :(得分:1)

这看起来很不错。我虽然没有任何经验。

jquery-rotate

答案 1 :(得分:0)

答案 2 :(得分:0)

如果您可以实施自定义解决方案,则应该可以正常工作。

jQuery代码-

$(document).ready(function(){
    var count = $('#container-name').children().length;
    var currentcount = 1;
    var firstimg = $('#container-name a:first');
    var nextimg = $('#container-name a.active').next();
    var activeimg = $('#container-name a.active');

    $(firstimg).delay(2500).fadeOut(2500);

    setInterval(function()
    {
        if (count > currentcount) {
            $(nextimg).fadeIn(2000);
            activeimg.removeClass('active');
            nextimg.addClass('active');
            activeimg = $('#container-name a.active');
            nextimg = nextimg.next();
            currentcount = currentcount + 1;
        } 
        else {
           $(firstimg).fadeIn(2500);
            activeimg.removeClass('active');
            activeimg = firstimg;
            activeimg.addClass('active');
            nextimg = firstimg.next();
            currentcount = 1;
        }
    $(activeimg).delay(2000).fadeOut(1000);
    }, 5000);
});

您需要添加此CSS代码以进行过渡。

#banners-container a {
    z-index:1;
    display: none;
}

#banners-container a.active {
    z-index: 3;
    display: inline-block;
}

#banners-container a.next {
    z-index: 2;
}

希望这会有所帮助。