javascript - HTMLでフェードインして画像を移動する

Question

いくつかの写真があり、HTMLのボタンをクリックしてそれらをナビゲートしたいと思います。ユーザーがクリックしたときに効果が発生する必要があります-ページをリロードしたくありません。役立つJavascriptまたはCSSはありますか？「次へ」ボタンを押すと、次の画像が画面にそっとフェードインします。

Answer 1

あなたがdivこのようなものを持っているなら：

<div id="yourDivId" >
    <img id="image_1_Id" class="" src="image_1.png" />
    <img id="image_2_Id" class="transparent" src="image_2.png" />
</div>

このコードをcssファイルに挿入します。

#yourDivId img.transparent 
{
    opacity:0;
}
#yourDivId img
{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

そして、このスクリプトをjavascriptファイルまたはhtmlヘッドスクリプトに追加します。

function btnClicked(){
    document.getElementById("image_1_Id").className += "transparent";
    document.getElementById("image_2_Id").className = "";
}

その他の例については、このサイトhttp://css3.bradshawenterprises.com/cfimg/を確認してください。

Answer 2

jQueryCycleを試してください。利用可能なトランジションがたくさんあり、外部の前/次のコントロールで設定できます。

メインプラグインページ：http：//jquery.malsup.com/cycle/

前/次のリンクを使用したデモ：http：//jquery.malsup.com/cycle/int2.html