Question

首先，你好。我一直试图在相当长的时间内取得成就。我正在尝试使用jquery创建背景全屏幻灯片。我确实使用css动画实现了这一点，但是如果你选择一个新标签，然后回到带有css动画的标签，它会开始像地狱一样落后。我假设如果使用jquery，这不会发生。另外，我尝试尽可能简单地创建它而不使用已经构建的jquery幻灯片插件，但我不能。

现在我有了一个主意。对于我的网站的背景我通常使用

<div id="background">
    <img src="background.jpg" class="stretch" alt="" />
</div>

使用以下css：

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

那么，是否可以让img src的值自动更改，如果可能的话，可以添加一些动画？

Answer 1

var urlArray = [
 'url1','url2','url3'
];
var slideShowTimings = 1000;
var i=0
setInterval(function(){
var $img = $($('.stretch')[0]);
$img.attr('.src',urlArray[++i%urlArray.length]);
},slideShowTimings);

尝试这个..这应该每1秒（1000毫秒）后改变背景图像如果你想要制作动画，那么你应该使用$ .animate（）OR $ .show（）和$ .hide（）。像这样的某些东西;

var urlArray = [
 'url1','url2','url3'
];
var slideShowTimings = 2000;
var i=0
setInterval(function(){
var $img = $($('.stretch')[0]);
$img.hide(slow,function(){
 $img.attr('.src',urlArray[++i%urlArray.length]);
 $img.show(fast)
});
},slideShowTimings);

使用动画jquery自动更改img src值

1 个答案: