注意:在DIV 内的 li 文本内容不能超过 div 的宽度,如果超出了 div 的宽度,会出现 li 超出div 范围内,并且 li 之间会
官方网站:
http://www.gmarwaha.com/jquery/jcarousellite/
插件描述:
JCarouselLite是一款jquery插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件。
说明:
12320网站首页推荐专家使用了走马灯的方式,以前选用的JS过于杂乱,不好调控,影响效率。所以选用JCarouselLite替代。
建议:
还有一款同类型的插件JCarousel,也可以使用,功能更加强大。
插件使用:
一、在ThinksKing的Plugins里面找到已解压好的JCarouselLite,将jcarousellite_1.0.1.min添加到项目中。
二、为页面添加jcarousellite:
1.1 添加Jquery和jcarousellite的引用。
<script src="http://www.cnblogs.com/Scripts/Plugin/Jcarousellite/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
1.2 Html代码编写.
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
1.3 方法调用.
1.4 API参数列表
btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev"
btnNext string 下一个按钮的class名, 比如 btnPrev: ".prev"
btnGo $(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
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 滚动结束时回调的函数,使用方法同上
2011.12.10 实现Widget
1.添加easing引用:
<script src="Scripts/Plugin/JCarousel/jquery.easing.1.1.js" type="text/javascript"></script>
调用代码:
<script type="text/javascript">
$(function () {
$(".widget .anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true,
speed: 800,
easing: "backout"
});
$(".widget img").click(function () {
$(".widget .mid img").attr("src", $(this).attr("src"));
})
});
</script>
页面代码:
<div class="widget">
<button class="prev">↓</button>
<div>
<div class="mid" style="float:left">
<img src="Images/2.jpg" alt="" height="100" width="100"/>
</div>
<div class="anyClass" >
<ul>
<li><img src="Images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/3.jpg" alt="" width="100" height="100" /></li>
</ul>
</div>
</div>
<button class="next">↑</button>
</div>
三、官方文档
Docuent:ThinksKing/Plugins/JCarouselLite/ jCarousel Lite – Document
API调用说明: ThinksKing/Plugins/JCarouselLite/JCarouselLite API
相关推荐
1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery.jqzoom.js、jquery.lazyload.js、jquery.soChange.js、jquery.uploadify.min.js、jquery.validate.js...
NULL 博文链接:https://eoasis.iteye.com/blog/653487
图片轮播插件jcarousellite.js
多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 15jQueryDemo.rar 3DGallery.zip bootstrap-3.3.2-dist.zip bootstrap-3.3.2.zip easyUI 1.4.4 Demo easyzoom....
不需要改的原网页的轮播插件,增加了鼠标悬停效果
jcarousellite的问题说明
基于Jquery的图片无缝滚动插件,需要的朋友可以参考下。
我从http://www.gmarwaha.com/jquery/jcarousellite/index.php#doc 下载的提炼的,很好用
jcarousellite是一款来自国外的jQuery插件,我们利用它可以实现很多功能,本文中,我们主要使用它完成一个可以控制左右切换的焦点图切换,幻灯片效果,当然,该幻灯片是可以自动切换的,唯一不足的之处是没有添加...
NULL 博文链接:https://chenjumin.iteye.com/blog/1461996
jQuery-jcarousellite水平、垂直滚动图片效果演示
兼容各种浏览器的jcarousellite插件,最特殊的地方是进过我修改,他兼容谷歌,官网不兼容谷歌的。
jcarousellite 基于jquery的可控切换的幻灯片 v1.0.zip
主要介绍了JQuery插件jcarousellite的参数中文说明,本文分别给出各个参数的含义,需要的朋友可以参考下
NULL 博文链接:https://110shen110.iteye.com/blog/2173857
一个jquery横向图片滚动在线示例,用了自己的一个JS-lrscroll.js [removed] $(function() { $("#botton-scroll").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" }); }); $(function () { $('#top-...
摘要:脚本资源,jQuery,图片滚动 一款由jQuery插件实现的效果,主要是关于jquery插件jCarouselLite的问题,关于left:-5000px这行CSS,官方这段不知道有何用处,如果放进去就会显示不了图片了,js动态产生的值为何没有...
NULL 博文链接:https://110shen110.iteye.com/blog/2232935