Question

我希望旋转一个div的背景图片，我相信我不能使用excellant 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">&nbsp;</div>
</body>

Answer 1

<强> Use-case jsBin Demo

为了对背景图片进行淡入淡出，您需要额外的图层来覆盖您的图库以下是所涉逻辑的一个例子：

因此，为浏览器预设正常的<img>标记创建一个DIV的地方，之后我们将使用他们的src作为封面background-image。元素：

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>

如何淡化循环库背景图像

1 个答案: