第32款插件:第26款插件：jcarousellite.js 基于Jquery的无缝“垂直滚动”图片插件

最新推荐文章于 2024-06-02 10:04:48 发布

skAce

最新推荐文章于 2024-06-02 10:04:48 发布

阅读量1.2k

点赞数

分类专栏： jQuery plug-in 文章标签： jquery jQuery JQUERY Jquery JQuery

33 篇文章 0 订阅

订阅专栏

描述：jcarousellite.js 是一款基于Jquery的无缝“垂直滚动”图片插件，可以水平，也可以纵向，在这里讲一下“垂直方向”的方法，在上一篇说说的是水平方向网址如下：http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=31。
需要说明一下：垂直和水平的区别在于：
1.CSS的宽度不同
2.参数多了一个vertical: true。如果此处设置为false，则还是水平方向的。读者可以测试测试！

图片展示：

兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：暂无
JS下载：http://ijquery.360sites.cn/js/jcarousellite.js
预览： http://ijquery.360sites.cn/demo/jcarousellite2
打包下载：http://ijquery.360sites.cn/js/jcarousellite/jcarousellite2.zip
参数说明：

btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev"
btnNext string 下一个按钮的class名, 比如 btnPrev: ".prev"
btnGo array 自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮：[".1", ".2"]
mouseWheel bool 鼠标滑是否可以轮控制上下滚动,可选：false,true,默认false
auto int 指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000
speed int 滑动的速度,可以尝试800 1000 1500,设置成0将删除效果
easing string 缓冲效果名称,如：easing: "bounceout",需要jquery中的easing pluin（缓冲插件实现）,只适用于jq1.2
vertical bool 是否垂直滚动,可选：false,true,默认false
circular bool 是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动
visible int 可见数量,可以为小数，如2.5为2.5个li
start int 开始的地方,默认是0
scroll int 每次滚动的li数量
beforeStart func 滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert("开始的对象是:" + a)}
afterEnd func 滚动结束时回调的函数,使用方法同上

复制代码

JS引用代码：

<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ijquery.360sites.cn/js/jcarousellite.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#demo-06').jCarouselLite({
btnPrev: '#prev-01',
btnNext: '#next-01',
visible: 3,
vertical: true
});
});
</script>

复制代码

HTML代码：

<div class="carousel-01">
<a href="javascript:void(0);" class="prev" id="prev-01"> </a>
<div class="jCarouselLite-01" id="demo-06">
<ul>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/1.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/2.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/3.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/4.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/5.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/6.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/7.jpg" /></a></li>
<li><a href="#" target="_blank"><img height="150" width="150" alt="" src="images/8.jpg" /></a></li>
</ul>
</div>
<a href="javascript:void(0);" class="next" id="next-01"> </a>
<div class="clear"></div>
</div>

复制代码

CSS代码：

.carousel-01 {width:152px;margin:30px auto;}
.carousel-01 .prev , .carousel-01 .next {height:23px;width:23px;overflow:hidden;display:block;margin-left:60px;text-decoration:none;cursor:pointer;}
.carousel-01 .prev {background:url(images/imageNavUp.jpg) no-repeat;}
.carousel-01 .next {background:url(images/imageNavDown.jpg) no-repeat;}
.jCarouselLite-01 {height:385px;width:152px;overflow:hidden;/*必要元素*/}
.jCarouselLite-01 li{height:152px;width:152px;text-align:center;padding:5px 0;}

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=32

关注

专栏目录