幻灯片不退色

我有一个幻灯片与几个图像。它有效，但有一个小缺点。图像全部淡出。让我解释一下：第一张图片淡入并淡出。第二张图像然后淡入并淡出。随后是第三张图片，它再次淡入淡出。问题是，在第一张图像淡出和第二张图像淡入之间，没有任何显示。我想淡入第一张图片，然后淡入第一张图片的第二张图片，依此类推。那样，在图像的淡化之间，这些没有任何东西。幻灯片不退色

我该如何改编下面的代码？

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

来源

2012-06-18 user1464260

这里有一个伟大的插件http://jquery.malsup.com/cycle/ –

所有你需要做的就是将你的'slideshowFadeIn';

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

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

来源

2012-06-18 16:48:09 laymanje

似乎没有做这项工作。试过了，但它使我的浏览器崩溃。 – user1464260

什么浏览器，版本和操作系统？它适用于Chrome，FF和Safari。 – laymanje

在IE8以及win7中测试它。在那里工作。不知道为什么你的浏览器会崩溃。 – laymanje

有被称为功能正是...做一个廉价的解决方案把slideshowFadeIn（）的淡出（）调用下你的第一个“if”语句。

来源

2012-06-18 16:49:58 PinkElephantsOnParade

似乎没有做这项工作。试过了，但它使我的浏览器崩溃。 – user1464260

幻灯片不退色

回答

相关问题