JavaScript画像スライダの切り替え

画像を変更した後にトランジションを追加するコードを探しています。は、ここに私のコードです：JavaScript画像スライダの切り替え

<script type = "text/javascript"> 
    function displayNextImage() { 
     x = (x === images.length - 1) ? 0 : x + 1; 
     document.getElementById("img").src = images[x]; 
    } 

    function displayPreviousImage() { 
     x = (x <= 0) ? images.length - 1 : x - 1; 
     document.getElementById("img").src = images[x]; 
    } 

    function startTimer() { 
     setInterval(displayNextImage, 3000); 
    } 

var images = [], x = -1; 
images[0] = "1.jpg"; 
images[1] = "2.jpg"; 
images[2] = "3.jpg"; 
</script> 

<body onload = "startTimer()"> 
<img id="img" src="1.jpg"/> 
</body>

は、コードが画像を変更したときに、いくつかのトランジションを追加するためにすべての可能な方法はありますか？

出典

2016-06-17 Vigi Menyhárt Gyula

ないとの作業例を持っています。トランジションが必要な場合は、トランジションの終わりに2番目のイメージを作成し、それを何らかの方法でトランジションし、ターゲットを置き換える必要があります。 –

大丈夫、ありがとうございます –

インスピレーションのために[この例]（http://css3.bradshawenterprises.com/cfimg/）をご覧ください。 –

は大雑把例えばフェードイン効果がでなければなりません：

function fadeIn(elementId, miliseconds) { 
    var el = document.getElementById(elementId); 
    el.style.opacity = 0; 
    var op = parseFloat(0); 

    var timer = setInterval(function() { 
    if (op >= 1.0) 
     clearInterval(timer); 

    op += 0.1; 
    el.style.opacity = op; 
    }, miliseconds); 
}

Hereで動作するように一つだけの画像があるとき、あなたのコードといくつかの追加

出典

2016-06-17 11:06:37

あなたの答えをありがとう、私はあなたのコードを見たことが、まだそれに任意のトランジションを持っていないようです。 –

@VigiMenyhártGyula申し訳ありませんが、単純なフェードインのためのソリューションを更新しました。これで遊ぶことができます。フェードアウトもあります。もしも助けがあれば、 –

を投票してください。私は私のプロジェクトでそれをインポートしましたが、まだ何も起こりません。 –

JavaScript画像スライダの切り替え

答えて

関連する問題