Question

我目前正在使用一个小的jquery脚本来旋转投资组合网站上的背景图片我正在为朋友的投资组合网站创建这里的代码：

  counter = 1; 
    num_images = 9;
    dir = "IMAGE DIRECTORY URL";

    function rotateHeader() {


 var background_img = 'url(' + dir + '/image' + counter + '.gif)';

 jQuery('.category').css('background-image', background_img);  
 counter++; if (counter > num_images) counter = 1;

    }
    setInterval( "rotateHeader()", 5000 );

你可以看到它在这里工作：

www.iamanatom.com/site/the-good

我想要做的是让图像和/或颜色淡入淡出。我想我必须预先加载图像才能执行此操作，然后在加载图片时添加某种淡入淡出属性。我该怎么做？

Answer 1

像这样的东西应该这样做

var counter = 1, 
    num_images = 9,
    dir = "IMAGE DIRECTORY URL";

function rotateHeader() {

    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('.category').fadeOut(function() {
        jQuery(this).css('background-image', background_img).fadeIn();
    });  
    counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );

首先我们淡出当前的背景图像，然后在回调函数中，更改背景图像，然后将其淡入。您可能希望使用fadeOut()和fadeIn()间隔来获取你想要的效果。我还更改了setInterval()以使用函数名称而不是要评估的字符串。

如何使用Jquery在旋转背景图像上创建淡入效果

1 个答案: