我需要制作一个 css 背景图片淡入淡出幻灯片。由于多种原因,我的 html 中不能有物理 div。它是具有当前背景的名为 -home- 的类的主体。幻灯片将有 4 张图片,不多不少,这样就不必动态了。
我已经有以下 jquery:
<script type="text/javascript">
$(document).ready(function() {
var original_image = '#000000 url(images/bg_home.jpg) top center no-repeat';
var second_image = '#000000 url(images/bg_home2.jpg) top center no-repeat';
var third_image = '#000000 url(images/bg_home3.jpg) top center no-repeat';
var fourth_image = '#000000 url(images/bg_home4.jpg) top center no-repeat';
$('.home').click(function() {
$(this).css('background', second_image);
});
});
</script>
因此,如您所见,这是一个非常简单的脚本,只有在我单击 general -home- div 时它才有效。任何人都可以帮助我将其转换为简单的淡入淡出幻灯片吗?它应该开始执行淡入淡出幻灯片加载。
非常感谢!
最佳答案
建议:
$(function(){
var images = [
'bg_home.jpg',
'bg_home2.jpg',
'bg_home3.jpg',
'bg_home4.jpg'
],
loop = 0,
$home = $('.home');
(function fader(){
$home
.fadeOut('fast', function(){
$home.css('background', '#000000 url(' + images[loop] + ') top center no-repeat');
$home.fadeIn('fast', function(){
setTimeout(fader, 3000);
});
});
if(loop < images.length)
loop++;
else loop = 0;
})();
});
关于jquery - 手动背景 div 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3387277/