幻灯片放映没有淡出

时间:2012-06-18 16:43:27

标签: jquery slideshow fadeout

我有一张带有几张图片的幻灯片。它有效,但有一个小缺点。图像全部淡出。让我解释一下:第一张图片渐渐消失并再次淡出。然后第二张图像淡入并淡出。接下来是第三张图片,它再次淡入淡出。 问题在于,在第一个图像的淡出和第二个图像的淡入之间,没有显示任何内容。我希望淡入第一张图像,然后在第一张图像的顶部淡入第二张图像,依此类推。这样,在图像消失之间就没有“无关紧要”。

我如何调整以下代码?

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>

您可以在小提琴中找到代码:script

2 个答案:

答案 0 :(得分:0)

您需要做的就是移动'幻灯片FadeIn';

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

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

答案 1 :(得分:0)

有些函数被称为正是这样......对于一个廉价的解决方案,在第一个“if”语句的fadeOut()调用下放置了slideshowFadeIn()。