Background-Image fade jquery
Background-Image fade jquery
提问于 2011-03-02 17:49:58
我有一个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>回答 1
Stack Overflow用户
发布于 2011-03-02 17:53:34
查看我对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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5165751
复制相关文章
相似问题
腾讯云开发者
