如何用jQuery淡入/淡出五个css背景图像

时间:2012-06-01 01:22:21

标签: jquery css image background rotation

我目前正在使用它,它会旋转到下一个图像并重复1-5

jQuery( function( $ ) {
    var images = [ "redesign/slides/Big_1.jpg", "redesign/slides/Big_2.jpg", "redesign/slides/Big_3.jpg", "redesign/slides/Big_4.jpg", "redesign/slides/Big_5.jpg"  ];
    var currentImage = 0;

    function changeBackground() {
        $( '#body_container' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }
    setInterval( changeBackground, 2000 );  
});

但是如何让图像淡入/淡出到下一张图像?

您可以在此处查看完整的主页:http://www.arcolacovenant.org/redesign_index

另外,如何在显示图像时将每个图像链接到不同的页面?

提前致谢。

1 个答案:

答案 0 :(得分:3)

如果您想要滑块,请使用滑块。实际上有成千上万。 nivo

如果你真的想自己制作一个,只是为了学习如何,甚至有成千上万的教程。关于如何制作滑块的文章很多,有round-up articles on all the articles