手动背景div幻灯片

发布于 2024-09-12 10:14:40 字数 782 浏览 10 评论 0原文

我需要制作一个 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>

因此，正如您所看到的，这是一个非常简单的脚本，只有在我单击常规 -home- div 时才有效。谁能帮我将其转换为简单的淡入淡出幻灯片而不需要任何点击？它应该刚刚开始执行淡入淡出幻灯片加载。

非常感谢！

原文

I need to make a css background image fade slideshow. For several reasons, i cannot have a physical div in my html. It's the body with a class called -home- that has a current background. There will be 4 pictures for the slideshow, no more, no less, so that doesn't have to dynamic.

I already have the following 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>

So, as you see this is a very simple script that only works if i click the general -home- div. Can anyone help me with transforming this into a simple fade slideshow without any click? It should just start executing the fade slideshow onload.

Thank you very much!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无力看清 2024-09-19 10:14:40

建议：

$(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;                
    })();         
});

Suggestion:

$(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;                
    })();         
});

回复收藏 0 原文

~没有更多了~