小编Bos*_*raF的帖子

使用fadeIn()循环显示背景图像

我正在制作一个带有一些视差图像的响应式网站,第一个图像是一个循环图像,就像一个图像滑块.我正在使用jquery Cool小猫的响应能力.

我加载的相关jquery插件是:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>
Run Code Online (Sandbox Code Playgroud)

div的css是:

#slide2 {
  background-image:url(../images/darkmap.png);
  height:700px;
}
Run Code Online (Sandbox Code Playgroud)

我发现使用这种布局将HTML图像用于背景可能会有问题,这就是为什么我通过使用数组来避免这种情况:

var imageIndex = 0;
var imagesArray = [
  "images/photo1.png",
  "images/photo2.png",
  "images/photo3.png"
];
Run Code Online (Sandbox Code Playgroud)

我有一个包含在$(document).ready()函数中的代码,它将css背景更改为数组,然后循环遍历数组,我添加fadeIn()了平滑过渡:

function changeImage(){
  var index = imageIndex++ % imagesArray.length;
  $("#slide2").css("background","url('"+ imagesArray[index] +"')");
}
setInterval(changeImage, 5000);
changeImage.fadeIn();
Run Code Online (Sandbox Code Playgroud)

图像循环工作正常,但由于某种原因fadeIn(),它不起作用,它只是从一个图像闪烁到另一个图像.有人可以告诉我我错过了什么吗?

jquery background-image fadein cross-fade

3
推荐指数
1
解决办法
1866
查看次数

标签 统计

background-image ×1

cross-fade ×1

fadein ×1

jquery ×1