3

ソーシャル メディア アイコンを含む小さなスライダーを作成したいのですが、div には 4 つのソーシャル メディア アイコンが含まれ、両端にはアイコンをスライドできる矢印があります。次の例のように 7 つのアイコンがあり、4 つが矢印で表示され、3 つが非表示になっているとします。

    <div class="slider" style="width: 228px;">    
    <img src="http://goo.gl/UvyXCP" />
    <ul>
        <li><img src="http://goo.gl/cfUTR2" /></li>
        <li><img src="http://goo.gl/oRd14R" /></li>
        <li><img src="http://goo.gl/8vusDB" /></li>
        <li><img src="http://goo.gl/3Tgn6o" /></li>
        <li><img src="http://goo.gl/C81toB" /></li>
        <li><img src="http://goo.gl/BPSKS8" /></li>
    </ul>
    <img src="http://goo.gl/fV0g9d" />
    </div>

画像が自動的にスライドする必要があり、必要に応じて矢印を使用して別の画像に切り替える必要があります。私は例を試しました。これはJSFIDDLEですが、機能していないようです。もっと簡単に作る方法があると思います。

誰かがここで私を助けてくれたら嬉しいです! 本当にありがとう！

4

1 に答える 1

1

jQuery 用のスライド プラグインを作成しました。気に入っていただけると思います :)

http://www.rosefalk.dk/library/base/index.html

自動的にスライドすることに関しては、タイマーイベントを追加するだけです。私のプラグインの良いところは、独自のフレームを完全にコーディングできることです。冗長なボックスを魔法のように作成することはありません (うーん!) :)

フィドル: FiddleURL

$("#test").rSlide({})

var go = "right";
setInterval(function(){
    if($("#test").data("slideData").counter == $("#test").data("slideData").childrenLength-1)
    {
       go = "left";
    }
    if($("#test").data("slideData").counter == 0)
    {
        go = "right";
    }
    $("#test").rSlide({direction:go});
},1000);

必要に応じて、 $("#test").rSlide({}) を $("#test").rSlide({trim:true}) に置き換えることができますが、ボックスを正しいサイズにトリミングします。あなたが探している結果を与えません。

また、プラグインを使用する場合は、www.greensock.com アニメーション プラグインを使用することをお勧めします。これにより、jQuery の組み込みのアニメーション機能を使用する場合よりもはるかにスムーズなトゥイーンが得られます (Greensock が追加されているかどうかをスクリプトが自動検出します。前提条件ではありません)。

$("#test").rSlide({direction:"right"}); の追加 ボタンなどの任意の要素に対して、スライダーを右にスライドさせます。最初に自動スライドを停止することを忘れないでください:)

編集：今のところ概要を削除

于 2013-10-02T12:54:19.837 に答える