【转】jquery scrollable的使用
这个是简单的例子 http://flowplayer.org/tools/demos/scrollable/one-sized.html
参数配置URL:http://flowplayer.org/tools/scrollable/index.html ，有中文翻译(http://www.jb51.net/article/19903.htm)
完整的HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/tabs-flowplayer-v2.css" />
<style>
/* override the root element to enable scrolling */
#flowpanes {
position:relative;
overflow:hidden;
clear:both;
}
/* override single pane */
#flowpanes div {
float:left;
display:block;
width:670px;
font-size:14px;
}
/* our additional wrapper element for the items */
#flowpanes .items {
width:20000em;
position:absolute;
clear:both;
margin:0;
padding:0;
}
#flowpanes .less, #flowpanes .less a {
color:#999 !important;
font-size:11px;
}
</style>
<script src=\'#\'" ></script'>http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
<script type="text/javascript" >
$(function() {
// select #flowplanes and make it scrollable. use circular and navigator plugins
$("#flowpanes").scrollable({ circular: true, mousewheel: true }).navigator({
// select #flowtabs to be used as navigator
navi: "#flowtabs",
// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',
// assign "current" class name for the active A tag inside navigator
activeClass: 'current',
// make browser's back button work
history: true
});
});
</script>
</head>
<body >
<!-- tabs work as navigator for scrollable -->
<ul id="flowtabs" class="navi">
<li><a id="t1" href="#story">The Story</a></li>
<li><a id="t2" href="#features">Features</a></li>
<li><a id="t3" href="#plugins">Plugins</a></li>
<li><a id="t4" href="#demos">Demos</a></li>
</ul>
<!-- tab panes -->
<div id="flowpanes">
<!-- wrapper for scrollable items -->
<div class="items">
<!-- the items -->
<div> xxxxxxxxxxxxxxxxxDIV[ any HTML here ]</div>
<div> [ any HTML here ]</div>
<div> [ any HTML here ]</div>
<div> [ any HTML here ]</div>
</div>
</div>
<!-- "Previous" action -->
<button class="prev">« Previous</button>
<!-- "Next" action -->
<button class="next">Next »</button>
</body>
</html>
分析：
$("div.scrollable").scrollable({
size: 3,
vertical:false,
//clickable:false,
loop:true,//设置是否自动跳转（根据间隔时间）
//interval: 1000,//设置间歇时间间隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳转到上一项
//next:'.next'//跳转到下一项
prevPage:'.prev',//跳转到上一页
nextPage:'.next',//跳转到下一页
hoverClass: 'hover',
easing:'linear'
});