1

いくつかの画像を含むスライドショーがあります。動作しますが、小さな欠点が 1 つあります。画像はすべてフェードアウトします。説明させてください。最初の画像がフェードインし、再びフェードアウトします。次に、2 番目のイメージがフェードインおよびフェードアウトします。続いて 3 番目の画像が続き、フェードインとフェードアウトが繰り返されます。問題は、最初の画像のフェードアウトと 2 番目の画像のフェードインの間に何も表示されないことです。最初の画像をフェードインしてから、最初の画像の上に 2 番目の画像をフェードインします。そうすれば、画像のフェードの間に「何も」ありません。

次のコードをどのように適応させますか?

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にあります。

4

2 に答える 2

0

「slideshowFadeIn」を移動するだけです。

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

if($('.slideshowimage').length!=0)
{
    $('.slideshowimage').fadeOut(1500,function(){$(this).remove()});
    slideshowFadeIn();
}
else
{
    slideshowFadeIn();
}
于 2012-06-18T16:48:09.253 に答える
0

まさにそれを行う関数が呼び出されています...安価なソリューションの場合、最初の「if」ステートメントのfadeOut()呼び出しの下にslideshowFadeIn()を配置します。

于 2012-06-18T16:49:58.463 に答える