jCarouselLite——传送带(多图)

原创 2016年08月30日 11:22:38



jcarousellite.js 是一款基于Jquery的无缝“水平滚动”图片插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件。


HTML代码:

<div>
     <a href="javascript:void(0);" id="prev-01"></a>
     <div id="demo-01">
          <ul>
             <li><a href="#"><img height="150" width="150" src="images/1.jpg" /></a></li>
             <li><a href="#"><img height="150" width="150" src="images/2.jpg" /></a></li>
             <li><a href="#"><img height="150" width="150" src="images/3.jpg" /></a></li>
             <li><a href="#"><img height="150" width="150" src="images/4.jpg" /></a></li>
            <li><a href="#"><img height="150" width="150" src="images/1.jpg" /></a></li>
            <li><a href="#"><img height="150" width="150" src="images/2.jpg" /></a></li>
            <li><a href="#"><img height="150" width="150" src="images/3.jpg" /></a></li>
            <li><a href="#"><img height="150" width="150" src="images/4.jpg" /></a></li>
</ul> </div> <a href="javascript:void(0);" id="next-01"></a> <div></div></div>

CSS代码:

.carousel .prev , .carousel .next {height:23px;width:23px;overflow:hidden;display:block;margin-top:40px;text-decoration:none;cursor:pointer;}
.carousel .prev {float:left;background:url(images/imageNavLeft.gif) no-repeat;}
.carousel .next {float:left;background:url(images/imageNavRight.gif) no-repeat;}
.carousel #prev-03.disabled{background:url(images/imageNavLeft-disabled.gif) no-repeat;cursor:default;}
.carousel #next-03.disabled{background:url(images/imageNavRight-disabled.gif) no-repeat;cursor:default;}

.jCarouselLite {float:left;width:486px;height:152px;overflow:hidden;/*必要元素*/}
.jCarouselLite li{height:152px;width:162px;text-align:center;}
.jCarouselLite li img,.jCarouselLite-01 li img{border:solid 1px #ddd;}


JS引用代码:

<script type="text/javascript" src="http://www.ijquery.cn/js/easing.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jcarousellite.js"></script>
<script type="text/javascript">
	 
	$('#demo-01').jCarouselLite({
		btnPrev: '#prev-01',
		btnNext: '#next-01',
		visible:2
	});
	 
</script>
注意:这个必须用到jquery-1.4.2.min.js,其他版本好像不能使用!

参数说明

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   滚动结束时回调的函数,使用方法同上


应用示例:





官网:http://www.gmarwaha.com/jquery/jcarousellite/

GitHub:https://github.com/ganeshmax/jcarousellite

演示:http://www.gmarwaha.com/jquery/jcarousellite/demo.php

         

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery图片传送带

1 css: #product { width:790px; height:200px; border:1px solid #ccc; margin:0 5px 5px 0; float:...
  • liangwenmail
  • liangwenmail
  • 2015年10月17日 20:07
  • 478

Jquery图片传送带

  • 2011年06月03日 22:01
  • 925KB
  • 下载

jQuery攻略.pdf

  • 2011年05月03日 17:53
  • 20.76MB
  • 下载

18款 非常实用 jquery幻灯片图片切换

http://www.iteye.com/topic/1125861 1、jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banne...
  • mituan1234567
  • mituan1234567
  • 2015年04月09日 11:07
  • 878

15个web前端的美轮美奂的 jQuery 图片特效

jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择。其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:15
  • 130

Jquery----jCarouselLite图片,文本上下,左右滑动

jCarouselLite.js (function($) { // Compliant with jquery....
  • damys
  • damys
  • 2014年05月08日 11:31
  • 1666

12款经典图片轮播jquery插件

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美...
  • judyge
  • judyge
  • 2016年07月17日 18:52
  • 186

强大的jQuery移动插件Top 10

随着移动互联网的发展,PC端的网页并不能完全适应移动端的要求,这使得响应式的设计体验成为一种潮流,从而也促成了jQuery Mobile的流行。jQuery Mobile具有良好的扩展性和可自定义性,...
  • sinat_27615265
  • sinat_27615265
  • 2016年03月30日 10:43
  • 415

Jquery图片轮播插件--jcarousellite的使用

一、关于jcarousellite插件: jcarousellite.js 是一款基于Jquery的无缝“垂直滚动”图片插件,可以水平轮播,也可以纵向轮播 二、如何使用: HTML代码:...
  • baidu_25343343
  • baidu_25343343
  • 2017年06月12日 14:52
  • 383

jquery图片传送带

1 css: #product { width:790px; height:200px; border:1px solid #ccc; margin:0 5px 5px 0; float:...
  • liangwenmail
  • liangwenmail
  • 2015年10月17日 20:07
  • 478
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jCarouselLite——传送带(多图)
举报原因:
原因补充:

(最多只允许输入30个字)