Question

我制作了一个带有一些视差图像的响应式网站，第一张图片就像一张图像滑块，就像一张自行车图像。我正在使用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()不起作用，它只是从一个图像闪烁到另一个图像。有人可以告诉我我错过了什么吗？

Answer 1

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

然而除此之外，您不想在单个元素上做什么。一旦更改元素的background-image，之前的背景图像就会消失。您将无法将其平滑地淡入其他图像，因为之前的图像已被替换并且不再存在。

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

HTML

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

的Javascript

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

JSFiddle demo

你也可以用数组（如你所描述的）和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 demo

使用fadeIn（）循环显示背景图像

1 个答案:

HTML

的Javascript