Question

我有一个div，我想随机淡入和淡出5个不同的背景图像。

我为此已经下载了一个jquery插件，但遗憾的是它是替代的 - 我会解释。

您必须设置默认背景图像（对于这种情况，请说“image1”），然后加载图像数组（例如image2，image3，image4和image5）。该插件所做的是复制div并将其直接放在原始div上，然后淡入然后输出其中一个图像。我从中得到的不良影响是：

1,2,1,3,1,4,1,5

而不是：

1,2,3,4,5

因为淡出简单再次显示默认图像。

在没有重新发明轮子的情况下有一种方法可以将代码修改为淡入动画完成时（默认情况下完全隐藏）我在背景div上换出图像，以便在淡出开始时下面有一张新图片？我对JQuery比较陌生，所以这不是我的力量。

这是插件的动作部分：

var tempImage = new Image();

jQuery(tempImage).load( function(){
    var newImage = ( helperElement.css('display') == 'block' ) ? jQuery(this) : jQuery(helperElement);
    newImage.css('backgroundImage', 'url('+tempImage.src+')');
    helperElement.animate( settings.effect, settings.duration, settings.easing, settings.callback );
});

tempImage.src = src;

在我的HTML中：

<script>
    document.getElementById('content_container_home').style.backgroundImage = "url('img/buttons.jpg')";
    $( function(){
        var bgImages = [ 'barker.jpg', 'boards.jpg', 'feet.jpg', 'glasses.jpg' ];
        var currImage = 'buttons.jpg';
        setInterval( function(){
            do{
                var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
            }while( randImage == currImage )
                currImage = randImage;
             $('#content_container_home').BgImageTransition( 'img/'+currImage );
            }, 5000)
    });
</script>

Answer 1

查看我对another question

的回答

这应该可以解决问题：

HTML：

<div id="testers">
  <div class="tester">
      <img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
  </div>
</div>
<div id="morework">
  <div class="holderdiv">
    <div class="tester">
      <img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
    </div>
  </div>
   <div class="holderdiv">
    <div class="tester">
      <img src="http://jsfiddle.net/favicon.gif" alt="" />
    </div>
  </div>   
</div>

CSS：

#morework{display:none;}

jQuery的：

 $(document).ready(function(){
   function runIt(){
     $('#morework').find('.holderdiv').each(function(i, elem) {
       $("#testers").delay(5000).fadeOut(1000, function() {
         $(this).html($(elem).html());
       }).fadeIn(1000, runIt);
     });
   };
   runIt()
 });

点击此处查看 - http://jsfiddle.net/sfsPx/

背景图像淡入淡出jquery

1 个答案: