1

JavaScript で作成したスライドショーでは、写真が非常に速く変化します。それらが次のものに点滅するのを止め、代わりにより多くのJavaScriptを含めて、写真をゆっくりと変化させたい.

これをstackoverflowで調べたところ、他の人はJQueryまたは私がよく理解していないものを使用しているようです。JavaScriptに何らかの遅延を追加できる可能性はありますか?

ここに私が持っているものがあります:

<html>
<head>

<script type="text/javascript">

    var pics = new Array(10);
    pics[0] = "images/pic1.jpg";
    pics[1] = "images/pic2.jpg";
    pics[2] = "images/pic3.jpg";
    pics[3] = "images/pic4.jpg";
    pics[4] = "images/pic5.jpg";
    pics[5] = "images/pic6.jpg";
    pics[6] = "images/pic7.jpg";


    var c = 0;
    var timer = 0;

    function cyclePics() {

        document.getElementById("pic1").src = pics[c];
        c++;
        if (c == 7) {
            c = 0;
        }
        timer = setTimeout("cyclePics()", 2000);
    }
</script>

</head>

<body onLoad="cyclePics()"> 

<div>

<img src="images/pic1.jpg" id="pic1"/>

</div>


</body>

</html>
4

3 に答える 3

1

jQuery はこの作業を簡単にします。

function cyclePics() {

        $("#pic"+c).animate({opacity:0}, 2000, function(){
            c++;
            if (c == 7) {
                c = 0;
            }
            document.getElementById("pic1").src = pics[c];
             $("#pic"+c).animate({opacity:1}, 2000, function(){ setTimeout(cyclePics, 2000) });
        })


    }

このコードは、jQuery の animate メソッドを使用しています。アニメーションの最後に発生するように、コールバック関数を使用して時間を計ることができます。

これが順番にどのように起こるかです。

  1. #pic1 を不透明度 0 にフェード
  2. C を評価し、#pic1 の src を変更します
  3. フェードイン #pic1
  4. setTimeout を使用して、cyclePics を再度呼び出します。
于 2012-08-14T23:06:39.727 に答える
0

JQuery などのライブラリを使用せずにできることを次に示します。純粋な CSS/Javascript です。

トランジション アニメーションについては、インターネットで何かを読むことができます。トランジションを使用すると、CSS プロパティが非常にゆっくりと変化することを確認できます。たとえば、あなたがすることができます。

function nextImg(){                         
    diaimg.style.opacity ="0";
    window.setTimeout (
    function(){
        diaimg.style.opacity ="1";
        document.images["urOBJ"].src = urArray[imgnr].src;
        imgnr++;
        if (imgnr>9){imgnr = 1;}
        }, 500);  // u can play a bit with this delay
}
function slider(){                     //nextIMG will be called every 2000ms
    IntervalID = setInterval("nextImg()", 2000);
}

これにより、最初に画像が透明になり、次に新しい画像が定義され、再び不透明度が 1 に移動します。滑らかにしたい場合は、CSS コードを含める必要があります。

    opacity: 1; transition: opacity 1s ease-in-out;

とても派手ではありませんが、機能します。より良いものが必要な場合は、この記事を読む必要があります: http://css-tricks.com/almanac/properties/t/transition/

これがどのように機能するかを本当に理解していれば、スライドイン/アウト効果とフェードイン/アウト効果を行うことができます

于 2014-12-17T12:34:17.350 に答える
0

jQuery は、アニメーションから HTML 要素の簡単な操作まで、あらゆる種類の操作を可能にする JavaScript のプラグインです。あなたの場合、jQueryが道です。

これを html ページに追加します。

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

次に、jQuery のチュートリアルを見つけて、自分の好きなことをして、徹底的に学んでください。機能に焦点を当てanimate()ます。jQuery だけで十分ですが、スライドショーをさらに簡単にする拡張機能が他にもいくつかあります。たとえば、slidesjs

于 2012-08-14T23:06:53.370 に答える