jQuery SerialScroll：将类添加到活动项 [英] jQuery SerialScroll: Add class to active item

问题描述

我正在使用Ariel Flesler的serialScroll脚本，并希望在活动或突出显示的项目中添加一个类，以便我可以使用CSS设置它。阅读文档我发现了通知触发器，但我不确定如何/如果它可以用来完成这个。

I'm using Ariel Flesler's serialScroll script and would like to add a class to the active, or highlighted item so I can style it with CSS. Reading the documentation I discovered the notify trigger, but I'm not sure how / if it could be used to accomplish this.

这是我的代码：

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>

我是否误解了通知触发器的功能？如果是这样，有没有其他方法来完成我所追求的目标？

Am I misunderstanding the function of the notify trigger? And if so, is there any alternate ways of accomplishing what I'm after?

推荐答案

从插件示例页面，这是如何正在使用onBefore：

From the plugin example page, here's how onBefore is being used:

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函数从上一个元素中删除该类。

in that function, you can add your active class, and use the onAfter function to remove the class from the previous element.

这篇关于jQuery SerialScroll：将类添加到活动项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！