0

軽量のスクリプト（純粋なJavaScriptを推奨）を探しています。これは、一連の画像を互いにスムーズにフェードインするためのものである必要があります（= image-carousel）。また、たとえば次のように、複数のインスタンスを実行できる必要があります（したがって、プロトタイプスクリプトである必要があります）。-サイトバナー：3つの画像を次々にフェードします-メインコンテンツ：3つのギャラリー、それぞれ3〜5つの画像をフェードします

その目的で使用するスクリプトに関する推奨事項はありますか？

ありがとう！

4

2 に答える 2

2

こんにちは私は、jQueryの.fadeOut（）メソッドと.fadeIn（）メソッドを数行のhtmlとcssとともに使用する簡単なスクリプトを作成しました。1からnまでの番号が付けられた画像要素のIDを使用すると、アルゴリズムは画像を簡単に反復し、最後の画像に到達したときに再開できます。ボタンのクリックで起動する代わりに、特定の時間遅延後に遷移が自動的に発生するように簡単に適合させることができます。これが役立つかどうか教えてください。コードは次のとおりです。

<style type="text/css">
        #images{ overflow:auto; }
        .current{ display:inline; }
        .hidden{ display:none; }            
</style>

<script type="text/javascript" >

    function doFade(current){

        var speed = 500;
        next = $("#"+(parseInt(current.attr("id")) + 1));
        if(next.length <= 0) next = $("#1");
        current.fadeOut(speed, 
            function fadeNextIn(){
                current.attr("class", "hidden");
                next.fadeIn(speed, 
                    function afterFadeNextIn(){
                        next.attr("class","current");
                    }
                );
            }
        );
    }

    $(document).ready(
        function () {
            $("#btnNext").click( 
                function(){ 
                    doFade($("#images .current"));
                }
            );
        }
    );

</script>

<div id="images">

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>

</div>

<input id="btnNext" type="button" value="next" />
于 2011-05-24T02:22:22.153 に答える
1

jQuery CrossSlideプラグインを使用しましたが、うまく機能します。

于 2010-08-04T23:46:12.477 に答える