Question

这是我的代码，要查看它的实际效果，请查看this Fiddle

HTML

<div id="header">
.
.
.
</div>

CSS

#header {
background: url(images/img8681.jpg);
background-size: cover;
border-bottom: 8px solid #333333;
height: 620px;
}

Javasript（jQuery）

var imgs = new Array("images/img8681.jpg","","","","");

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
}

setInterval(changeBg,5000);

我的问题是如何顺利更改图像而不是＆＃34;只需替换＆＃34; ？如何避免连续出现相同的图像？

Answer 1

如果您使用fadeIn和fadeOut功能，则可以更加顺畅地更改图片。

var imgs = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
    $('#header').fadeIn(1000); //this is new, will fade in smoothly
}

function changeBackgroundSmoothly() {
    $('#header').fadeOut(1000, changeBg); //this is new, will fade out smoothly
}

setInterval(changeBackgroundSmoothly,5000);

请参阅this Fiddle以查看结果。

关于图像的随机性，如果图像必须是随机的，则不能做很多事情。仅仅因为随机意味着同一图像可能连续出现两次，否则它不会完全随机，因为您可以排除一个结果。

解决方案可能是不随机显示图像，而是以预定义的顺序显示图像，请参阅this site以获取示例。

Answer 2

只是另一种方法

{{1}}

您可以在此处查看：https://jsfiddle.net/rafaelaca/wwjro184/

更改背景图像时平滑淡入淡出

2 个答案: