-1

私は、さまざまな画像を表示し、フェードインおよびフェードアウトする小さな JavaScript ギャラリーに取り組んでいます。残念ながら、フェードインを適切に機能させることができないようです。

誰でもこれを修正する方法を教えてもらえますか? これまでの私のコードは次のとおりです。

//This goes in the head of the html file:
<script type="text/javascript">
var imageCount = 4;
var image = new Array(imageCount);
image [1] = "slideshow/testimg1.jpg"
image [2] = "slideshow/testimg2.jpg"
image [3] = "slideshow/testimg1.jpg"
image [4] = "slideshow/testimg2.jpg"
</script>

//This goes in the body of the html file
<img width="760" height="260" name="slide">
<script type="text/javascript">
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
    //Change image
    document.images.slide.src = image [step];
    //Change step
    if (step < imageCount)
        step++;
    else
        step = 1;
    FadeIn();
}
function FadeIn()
{
    if (document.images.slide.style.opacity < 1)
    {
        //Increase opacity
        document.images.slide.style.opacity += 0.05;
        setTimeout("FadeIn()", 20);
    }
    else
    {
        //Set opacity to 1, fade out
        document.images.slide.style.opacity = 1;
        setTimeout("FadeOut()", 4000);
    }
}
function FadeOut()
{
    if (document.images.slide.style.opacity > 0.05)
    {
        //Reduce opacity
        document.images.slide.style.opacity -= 0.05;
        setTimeout("FadeOut()", 20);
    }
    else
    {
        //Set opacity to 0.5, change the image
        document.images.slide.style.opacity = 0.05;
        NextImage();
    }
}
NextImage();
</script>

アイデアは、NextImage、FadeIn、および FadeOut 関数の間で切り替えることです。テストするたびに次のようになるため、フェードを除いてすべてが機能しています。

画像の読み込み、フェードアウト、2 番目の画像の読み込み、フリーズ。

誰かがこれで私を助けてくれることを願っています。前もって感謝します。

〜ルカ。

編集：これで修正されました：

//Increase opacity
var x = parseFloat(document.images.slide.style.opacity) + 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);

ありがとう！

4

2 に答える 2

1

変化する：

setTimeout("FadeIn()", 20);

に

setTimeout(FadeIn, 20);

それが役立つかどうかを確認します（および他の setTimeout 関数も）。

編集/追加: document.images.slide.style.opacity += 0.05; 実際には増加していません。次の変更を試してください。

//Increase opacity
var x = parseFloat(document.images.slide.style.opacity);
x += 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);
于 2013-09-30T13:09:19.137 に答える
0

これが実用的なフィドルです。

実際に起こっているのは、特定の間隔がオーバーフローした後に設定されたタイムアウト機能が実行されるイベントを保存するイベントスタックです:)

フィドル

try{


   var imageCount = 4;
var image = new Array(imageCount);
image [1] = "http://i.dailymail.co.uk/i/pix/2009/06/01/article-0-05144F3C000005DC-317_468x387.jpg";
image [2] = "http://images.theage.com.au/ftage/ffximage/kaka_narrowweb__300x323,2.jpg";
image [3] = "http://ricardokakaonline.com/wp-content/uploads/2011/10/istoe.com_.br-kaka.jpg";
image [4] = "http://farm2.static.flickr.com/1226/1366784050_d697d3cde3.jpg";
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
    //Change image
    document.images.slide.src = image [step];
    //Change step
    if (step < imageCount)
        step++;
    else
        step = 1;
    FadeIn();
}
function FadeIn()
{
    if (document.images.slide.style.opacity < 1)
    {
        //Increase opacity
        document.images.slide.style.opacity += 0.05;

        setTimeout(FadeIn(), 200);
    }
    else
    {
        //Set opacity to 1, fade out

        document.images.slide.style.opacity = 1;
        setTimeout(FadeOut(), 2000);
    }
}
function FadeOut()
{
    if (document.images.slide.style.opacity > 0.05)
    {
        //Reduce opacity
        document.images.slide.style.opacity -= 0.05;
        setTimeout(FadeOut(), 200);
    }
    else
    {

        //Set opacity to 0.5, change the image
        document.images.slide.style.opacity = 0.05;
        NextImage();
    }
}
NextImage();
}catch(e){
alert(e)
}

jqueryを使用してフェードインフェードアウトを試してみてください..フリーズしている理由を確認するためにtry catchブロックを追加しました。

Heresは、javascriptフェードインアウトを使用したフェードインフェードアウトのリンクです

于 2013-09-30T13:21:03.277 に答える