我希望旋转div的背景图像,我认为这使我不能使用优秀的jQuery Cycle Plugin.
下面的代码是我到目前为止,但它没有我想要的行为,这是：
>淡出第一张图片
>在没有显示的情况下,用第二张图像交换图像
图像 – (第二张图像中的淡入淡出)
>并重复到无限……以及更远.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#mydiv {
width: 100%;
height: 365px;
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
background: url(HP_jQuery1.jpg) center top no-repeat;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
var firstTime = true;
var arr = ["url(HP_jQuery2.jpg)","url(HP_jQuery3.jpg)"];
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow");
$('#mydiv').css('background-image',bgImage);
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
},3600);
})(0);
});
</script>
</head>
<body>
<div id="mydiv"> </div>
</body>
解决方法
Use-case jsBin Demo
为了对背景图像进行淡入淡出,您需要一个额外的图层来覆盖您的图库.
以下是涉及的逻辑示例：
所以创建一个DIV正常的地方< img>用于浏览器预加载图像的标签,我们之后将使用它们的src作为两个元素的覆盖背景图像：
jQuery(function($) {
var $gallery = $("#gallery"); // Your HTML gallery
var $overlay = $("<div/>"); // An overlay to X-fade
var $images = $gallery.find("img");
var n = $images.length; // How many images we have
var c = 0; // Just a counter to loop using Reminder Operator %
$gallery.css({backgroundImage: "url("+ $images[c].src +")"}).append( $overlay );
(function loopBg(){
$overlay.hide().css({backgroundImage: "url("+ $images[++c%n].src +")"}).delay(2000).fadeTo(1200,1,function(){
$gallery.css({backgroundImage: "url("+ $images[c%n].src +")"});
loopBg();
});
}());
});
html,body{
height:100%; margin:0; /*If needed*/
}
#gallery,/*Your gallery ID */
#gallery > div /*Immediate DIV child,created by jQuery*/
{
position:absolute;
width: 100%; height:100%;
background: #000 none 50% / cover;
}
#gallery img{
display:none;
/*Exactly. We'll use them as BG images*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="gallery"> <!-- We'll not show images,those are just used for the browser to preload them Let's just steal the images Sources and use them for the #gallery and #overlay backgrounds --> <img src="http://dummyimage.com/600x365/fc5/fff&text=Image1" /> <img src="http://dummyimage.com/600x365/cf5/fff&text=Image2" /> <img src="http://dummyimage.com/600x365/f5c/fff&text=Image3" /> </div>
