文章内容
jcarousellite是一款来自国外的jQuery插件, 我们利用它可以实现很多功能,这里我们主要使用它完成一个可以控制左右切换的时间轴效果, css做的有点丑,你可以自己美化它。
关键代码
<script language="javascript" type="text/javascript"> $(function () { $("#years").jCarouselLite({ btnPrev: "#left_btn", btnNext: "#right_btn", auto: 400000, //图片停留时间 scroll: 1, //每次滚动覆盖的图片个数 speed: 1000, //设置速度,0是不动。其次就是数字越大 ,移动越慢。 vertical: false, //横向(true),竖向(false) visible: 7, //显示的数量 mouseWheel: true, circular: false //是否循环 }); $(".years ul>li:first").addClass("active"); $(".events_box ul").not(":first").hide(); $(".years ul>li").unbind("click").bind("click", function () { $(this).siblings("li").removeClass("active").end().addClass("active"); var index = $(".years ul>li").index($(this)); $(".events_box ul").eq(index).siblings(".events_box ul").hide().end().fadeIn(1); }); }) </script>
jCarouselLite参数说明
btnPrev string 上一张按钮
btnNext string 下一张按钮
btnGo array 标签控制,也就是用’1,2,3,4…’来控制
mouseWheel bool 是否支持鼠标滑轮滚动,属性值:false / true;默认为false 打开此项需要jQuery UI插件支持
auto int 设置自动播放的速度,默认自动播放是关闭的,格式 auto: 800 (为播放速度)
speed int 动画效果速度
easing string 动画效果优化,如:easing: "bounceout",需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2
vertical bool 动画方向,如果设置为true,则表示垂直滚动,默认为false
circular bool 是否重复播放,如果设置为false,则到最后一个下一张按钮就点不动了,到第一张上一张按钮就点不动
visible int 设置默认显示几个li,默认是3个
start int 效果从第几个开始,默认为0
scroll int 一次滑动几个li,默认是2
beforeStart func 这个是接口,每次滑动效果执行之前执行的自定义函数
afterEnd func 这个是接口,每次滑动效果执行之后执行的自定义函数