幻灯片剧烈闪烁答案

【问题标题】：Slideshow flashing violently幻灯片剧烈闪烁
【发布时间】：2011-06-02 17:17:42
【问题描述】：

我正在尝试为幻灯片背景编写一些代码。请不要观看我的内容超过 5 秒，以免癫痫发作。如果你能帮我解决我的问题，那就太好了。 http://ftp.gigemposters.com

<body>
<div id="background">
<div class="bg hidden"><img src="images/bg01.jpg"></div>
<div class="bg hidden"><img src="images/bg02.jpg"></div>
<div class="bg hidden"><img src="images/bg03.jpg"></div>
<div class="bg hidden"><img src="images/bg04.jpg"></div>
<div class="bg hidden"><img src="images/bg05.jpg"></div>
</div>
<script type="text/javascript">
$(function(){
    $('#background').each(function(){
        var $imgArray = $(this).children();
        $imgArray.eq(Math.floor(Math.random()*$imgArray.length)).switchClass('hidden','visible',0);
    });
    setInterval(function(){changeImage();},5000)
    function changeImage(){
        $("div").each(function (){
            if($('div').hasClass('visible')){
                $('div').switchClass('visible','hidden');
                $('div.visible').next('div').switchClass('hidden','visible');                   
            };
            if($('div:last').hasClass('visible')){
                $('div:last').switchClass('visible','hidden');
                $('.bg:first').switchClass('hidden','visible');                 
            };
        });
    };
});

CSS：

*{margin:0; padding:0;}
body{}
.bg img{min-height:100%; min-width:1024px; width:100%; height:auto; position:fixed; top:0; left:0;}
@media screen and (max-width: 1024px) { .bg img{left: 50%; margin-left:-512px;} }
.hidden{visibility:hidden;}
.visible{visibility:visible;}

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

编辑：

这段代码应该可以工作：

$(function(){
    $('#background').each(function(){
        var $imgArray = $(this).children();
        $imgArray.eq(Math.floor(Math.random()*$imgArray.length)).switchClass('hidden','visible',0);
    });

    setInterval(function(){changeImage();},5000);

    function changeImage() {
        if($('.bg:last').hasClass('visible')) {
            $('.bg:last').switchClass('visible','hidden');
            $('.bg:first').switchClass('hidden','visible');   
        } else {
            $('.visible').next('.hidden').switchClass('hidden','visible');
            $('.visible:first').switchClass('visible','hidden');
        }
    }
});

【讨论】：