如何淡出画廊背景图片 [英] How to fade loop gallery background images

问题描述

我想旋转一个div的背景图片，我相信排除了我使用excellant jQuery循环插件。

下面的代码是我到目前为止但它不像我想要的，这是：

• 淡出第一张图片


• 在不显示
  的情况下与第二张图片互换图片 - （第二张图片中的淡入淡出失败）


• 重复到无穷大...以及之后。

 < script type ='text / javascript'src =' http://code.jquery.com/jquery-1.5.2.js'> ;</script> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js>< / script> 
< link rel =stylesheettype =text / csshref =/ css / normalize.css> 
< link rel =stylesheettype =text / csshref =/ 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 $ b recurse（counter + 1）; 
}，3600）; 
}）（0）; 
}）; 
< / script> 
 
< / head> 
< body> 
< div id =mydiv>& nbsp;< / div> 
< / body> 
  

解决方案

所以创建一个DIV一个地方就可以了 img> 标签，以便浏览器预加载图片，我们将使用 src 后缀作为 -image 两个元素：

  jQuery （function（$）{var $ gallery = $（＃gallery）; // Your HTML gallery var $ overlay = $（< div />）; //覆盖到X-fade var $ images = $ gallery.find（img）; var n = $ images.length; //我们有多少图像var c = 0; //只是一个计数器循环使用提醒操作符％$ 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; / *如果需要* /} #gallery，/ *您的画廊ID * /＃gallery> div / * Immediate DIV child，由jQuery创建* / {position：absolute;宽度：100％;高度：100％;背景：＃000 none 50％/ cover;}＃gallery img {display：none; /*究竟。我们将使用它们作为BG图像* /}  

  ; script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =gallery> <！ - 我们不会显示图像，这些只是用于浏览器预加载他们只是偷了图像来源，并使用它们的#gallery和#overlay背景 - > < 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>  

I wish to rotate a background image of a div which I believe precludes me from using the excellant jQuery Cycle Plugin.

The code below is what I have so far but it does not behave as I would like, which is:

• Fade out first image
• Swap image with second image while not showing an image - (fails this Fade in second image)
• And repeat into infinity ...and beyond.

<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> 

解决方案

Use-case jsBin Demo

In order to Cross-fade a background image, you'll need an extra layer to overlay your gallery.
Here's an example of the logic involved:

So create a DIV an place into it normal <img> tags for the browser to pre-load images, we'll use their src afterwards to use as covered background-image for the two elements:

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>

这篇关于如何淡出画廊背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！