jQuery SerialScroll:将类添加到活动项
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.
我正在使用Ariel Flesler的serialScroll脚本,并希望将一个类添加到活动或突出显示的项目中,以便我可以使用CSS设置它。阅读文档我发现了通知触发器,但我不确定如何/是否可以用它来完成此操作。
This is my code:
这是我的代码:
jQuery
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
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?
我误解了通知触发器的功能吗?如果是这样,有没有其他方法可以完成我追求的目标?
1 个解决方案
#1
3
From the plugin example page, here's how onBefore is being used:
从插件示例页面,这里是如何使用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.
}
in that function, you can add your active class, and use the onAfter function to remove the class from the previous element.
在该函数中,您可以添加活动类,并使用onAfter函数从上一个元素中删除该类。
更多相关文章
- 在离开当前页面时调用函数。
- money_format()函数显示 而不是本地货币符号(磅)
- EL中的fn函数,jstl的fn函数,fn函数,fn函数描述,fn使用举例
- HTML5_旋转轮播-电子相册-新startMove函数写无缝轮播
- 深入剖析php执行原理(4):函数的调用
- php中的gethostbyname函数有问题
- JRoute::_() -函数在哪里?在joomla
- 在HTTP 1.0中,状态码401的含义是什么;如果返回“找不到文件”的提
- PHP常用的文件操作函数集锦