Question

修改this脚本，我可以浏览背景图像并通过正文'background-image'属性循环它们。但是，我想知道是否可以使用jQuery动画（或其他方法）来执行淡入淡出过渡。我试图使用其他脚本，例如jQuery循环插件，但问题似乎是固定属性。这是我到目前为止所做的工作：

<style>
body{
/*Remove below line to make bgimage NOT fixed*/
background-image:url(/sites/default/files/bg-3.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size:100%;
}
</style>

<script type="text/javascript">
(function($){
$(document).ready(function(){
var bgimages=new Array()
bgimages[0]="/sites/default/files/bg-1.jpg"
bgimages[1]="/sites/default/files/bg-2.jpg"
bgimages[2]="/sites/default/files/bg-3.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
$('body').css({'background-image':'url('+pathToImg[inc].src+')'});
}

setInterval(function(){
    bgSlide();
},3000);

});
})(jQuery)
</script>

Answer 1

我很确定你不能完全这样做。

你可以通过在你的内容后面加上一个div（或图像）作为背景来模拟这个，类似于：

http://jsfiddle.net/HDWpM/

Answer 2

David Walsh解释了如何使用你可以看到的MooTools here来做到这一点！你也可以使用jQuery，MooTools只是一个不同的库。

以下是演示：http://davidwalsh.name/dw-content/background-animation.php

jQuery：动画背景图片

2 个答案: