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