1

Ariel FleslerのserialScrollスクリプトを使用していて、CSSでスタイルを設定できるように、アクティブなアイテムまたは強調表示されたアイテムにクラスを追加したいと思います。ドキュメントを読んで、通知トリガーを発見しましたが、これを実現するためにどのように/使用できるかわかりません。

これは私のコードです：

jQuery

jQuery(function( $ ){

    $('#slideshow').serialScroll({
        items:'li',
        prev:'#screen2 a.prev',
        next:'#screen2 a.next',
        offset:-180,
        start: 0,
        duration:1200,
        force:true,
        stop:true,
        lock:false,
        cycle:false,
        jump: true
    });

});

HTML

    <div id="screen2">
    <div id="buttons">
        <a class="prev" href="#">Previous</a>
        <a class="next" href="#">Next</a>
        <br class="clear" />
    </div>
    <div id="slideshow">
        <ul>
            <li><img src="http://www.stockvault.net/data/s/113497.jpg" /></li>
            <li><img src="http://www.stockvault.net/data/s/100177.jpg" /></li>
            <li><img src="http://www.stockvault.net/data/s/101916.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-steps-in-snow-thumb12853223.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-eggs-thumb15876342.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-cat-thumb15385101.jpg" /></li>
            <li><img src="http://www.dreamstime.com/green-nature-thumb596309.jpg" /></li>
            <li><img src="http://www.dreamstime.com/office-in-nature-thumb3256171.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-tree-thumb16030502.jpg" /></li>
            <li><img src="http://www.dreamstime.com/gift-of-the-nature-thumb15977958.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-abstract-thumb3615419.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-path-in-forest-with-sunshine-thumb8241130.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-walk-thumb8436665.jpg" /></li>
            <li><img src="http://www.dreamstime.com/save-the-nature-thumb15696583.jpg" /></li>
        </ul>
    </div>
</div>

通知トリガーの機能を誤解していますか？もしそうなら、私が求めていることを達成するための別の方法はありますか？

4

1 に答える 1

3

プラグインのサンプルページから、onBeforeがどのように使用されているかを次に示します。

onBefore:function( e, elem, $pane, $items, pos ){
    /**
    * 'this' is the triggered element 
    * e is the event object
    * elem is the element we'll be scrolling to
    * $pane is the element being scrolled
    * $items is the items collection at this moment
    * pos is the position of elem in the collection
    * if it returns false, the event will be ignored
    */
    //those arguments with a $ are jqueryfied, elem isn't.
}

その関数では、アクティブなクラスを追加し、onAfter関数を使用して前の要素からクラスを削除できます。

于 2011-12-01T17:58:41.587 に答える