没有淡出的幻灯片答案

【问题标题】：Slideshow with no fade out没有淡出的幻灯片
【发布时间】：2012-06-19 00:49:58
【问题描述】：

我有一张幻灯片，里面有几张图片。它有效，但有一个小缺点。图像全部淡出。让我解释一下：第一个图像淡入并再次淡出。然后第二个图像淡入淡出。接下来是第三张图像，它再次淡入淡出。问题是在第一张图像淡出和第二张图像淡入之间，什么都没有显示。我想淡入第一张图像，然后在第一张图像上淡入第二张图像，依此类推。这样，图像的褪色之间就没有“任何东西”。

如何修改下面的代码？

html:

<div class="slideshow"></div>

Javascript

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var images=new Array('http://placehold.it/450x450','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(1500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(1500,function(){setTimeout(doSlideshow,1500);}));
    if(nextimage>=images.length)
        nextimage=0;
}
});//]]>  

</script>

CSS

<style type='text/css'>
    .slideshow
{
    position: absolute;
    width: 455px;
    height: 450px;
}
.slideshow img
{
    position: absolute;
    width: 455px;
    height: 450px;
    z-index:1;
}
  </style>

您可以在 fiddle 找到代码：script

【问题讨论】：

这个jquery.malsup.com/cycle有一个很棒的插件

标签： jquery slideshow fadeout

【解决方案1】：

你需要做的就是移动你的'slideshowFadeIn'；

http://jsfiddle.net/R4ZHX/195/

if($('.slideshowimage').length!=0)
{
    $('.slideshowimage').fadeOut(1500,function(){$(this).remove()});
    slideshowFadeIn();
}
else
{
    slideshowFadeIn();
}

【讨论】：

似乎没有完成这项工作。试过了，但它让我的浏览器崩溃了。
什么浏览器、版本和操作系统？它在 Chrome、FF 和 Safari 中运行良好。
在 IE8 和 win7 中测试过。也在那里工作。不知道为什么您的浏览器会崩溃。
用 firefox 3.0.19 windows vista 试了一下。在我的iphone和ipad上也试过了。它似乎在第一个周期工作，但它看起来像挂起并且我的浏览器崩溃了。

【解决方案2】：

有些函数正是这样做的……为了一个便宜的解决方案，将 slideshowFadeIn() 放在第一个“if”语句中的 fadeOut() 调用下。

【讨论】：

似乎没有完成这项工作。试过了，但它让我的浏览器崩溃了。