3

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

我加载的相关jquery插件是：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>

div的css是：

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

我发现在这种布局中使用 HTML 图像作为背景可能会出现问题，这就是为什么我通过使用数组来避免这种情况：

var imageIndex = 0;
var imagesArray = [
  "images/photo1.png",
  "images/photo2.png",
  "images/photo3.png"
];

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

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

图像循环工作正常，但由于某种原因fadeIn()无法正常工作，它只是从一个图像闪烁到另一个图像。有人可以告诉我我错过了什么吗？

4

1 回答 1

9

正如其他用户所提到的，您不能.fadeIn()在函数上使用。您只能在元素上使用它。

但是除此之外，您想要做的事情在单个元素上是不可能的。只要您更改background-image元素的 ，之前的背景图像就会消失。您将无法将其平滑地淡入另一个图像，因为之前的图像已被简单地替换并且不再存在。

您将需要添加多个包含背景图像的元素，将它们放在彼此之上position: absolute;，然后您可以使用 jQuery 淡入或淡出适当的元素。

HTML

<div id="background1"></div>
<div id="background2"></div>

Javascript

setTimeout(function(){
    $("#background2").fadeIn();
}, 2000);

JSFiddle 演示

您还可以使用数组（如您所描述的）和 2 个 html 元素使这更加动态：一个底部元素和一个顶部元素，您将在背景中循环：

var index = 0;
var imagesArray = ["https://placekitten.com/g/500/300", 
                   "https://placekitten.com/g/600/300", 
                   "https://placekitten.com/g/700/300"];
var background1 = $("#background1"),
    background2 = $("#background2");

//Set the starting background
background2.css("background","url('"+ imagesArray[index] +"')");
setInterval(changeImage, 2000);

function changeImage(){
    //Make sure that the bottom element has the "old" background
    background2.css("background","url('"+ imagesArray[index] +"')");

    //Hide the top element which we will load the "new" background in now
    background1.hide();

    index++;
    if(index >= imagesArray.length){
        index = 0;
    }

    //Set the background of the top element to the new background
    background1.css("background","url('"+ imagesArray[index] +"')");
    //Fade in the top element
    background1.fadeIn();
}

JSFiddle 演示

于 2014-12-29T16:17:41.217 回答