最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jquery多张缩略图滚动插件示例
时间：2013-09-28 编辑：简简单单 来源：一聚教程网
最近闲暇时间，写了个多张图片水平、竖直滚动的jquery插件（如果是单张的，可以见我以前写的文章xdmJS应用之JS图片循环轮播图（图片循环滚动）），插件内容如下：
| 代码如下 | 复制代码 |
| /* @plugName: jquery.breviaryScroll.js @company: baidu.com @author: by xudeming@baidu.com @data: 2013-06-08 @blog: http://www.css119.com */ (function($){ $.fn.breviaryScroll=function(options){ /*定义默认值*/ var defaults={ displayLength:3, //显示的图片个数 speed:200, //滑动的速度 disableClassName:"btn-disable", //不能点击的按钮的样式 childTagName:"li", //子元素的标签名称 childMargin:"3px", //子元素之间的间隙 btnPrev:"#breviaryPrev", //上一页的按钮名称 btnNext:"#breviaryNext", //下一页的按钮名称 scrollNum:1, //一次滚动的图片张数 direction:"left" //图片滚动的方向,取值为left或者top }; var opts=$.extend(defaults,options); $(this).each(function(){ var i=0, obj=$(this), sNum=obj.find(opts.childTagName).length, prev=$(opts.btnPrev), next=$(opts.btnNext), dir=opts.direction, dirObj={}, sLiWidthHeight=0; //重置 obj.css("left",0); prev.addClass(opts.disableClassName); next.removeClass(opts.disableClassName); //水平滚动时，计算外层的宽度 if(dir=="left"){ sLiWidthHeight=obj.find(opts.childTagName).outerWidth()+parseInt(opts.childMargin); obj.width(sNum*sLiWidthHeight+"px"); //不用定义样式，自动根据要显示的图片个数自适应宽度，免得修改个数后还得修改样式 obj.parent().width(opts.displayLength*sLiWidthHeight+parseInt(opts.childMargin)+"px"); } //竖直滚动时，计算外层的高度 else if(dir=="top"){ sLiWidthHeight=obj.find(opts.childTagName).outerHeight()+parseInt(opts.childMargin); obj.height(sNum*sLiWidthHeight+"px"); //不用定义样式，自动根据要显示的图片个数自适应高度，免得修改个数后还得修改样式 obj.parent().height(opts.displayLength*sLiWidthHeight+parseInt(opts.childMargin)+"px"); } //缩略图总数小于显示的个数的时候，把按钮都disable if(sNum<= opts.displayLength) { next.addClass(opts.disableClassName); } /*缩略图总数大于显示的个数的时候*/ else{ prev.unbind("click"); prev.click(function(){ if(i>0){ i-=opts.scrollNum; dirObj[dir]=-i*sLiWidthHeight+"px"; next.removeClass(opts.disableClassName); obj.animate(dirObj,opts.speed, function(){ if(i==0){ prev.addClass(opts.disableClassName); } } ); } }); next.unbind("click"); next.click(function(){ if(i dirObj[dir]=-i*sLiWidthHeight+"px"; prev.removeClass(opts.disableClassName); obj.animate(dirObj,opts.speed, function(){ if(i>=sNum-opts.displayLength){ next.addClass(opts.disableClassName); } } ); } }); } }); } })(jQuery) |
|
可以设置很多参数，如：
displayLength:3, //显示的图片个数
speed:200, //滑动的速度
disableClassName:"btn-disable", //不能点击的按钮的样式
childTagName:"li", //子元素的标签名称
childMargin:"3px", //子元素之间的间隙
btnPrev:"#breviaryPrev", //上一页的按钮名称
btnNext:"#breviaryNext", //下一页的按钮名称
scrollNum:1, //一次滚动的图片张数
direction:"left" //图片滚动的方向,取值为left或者top因为此效果在平常还是挺多见的，现在分享给大家。
水平滚动的代码如下(你可以更改插件的参数观看不同的效果，如把scrollNum改为2等)：
| 代码如下 | 复制代码 |
|
ul,li{margin:0;padding:0;list-style:none} |
|
上一页
■1
■2
■3
■4
■5
■6
■7
■8
■9
.下一页
| 代码如下 | 复制代码 |
| .jQuery(function(){ jQuery("#imageList").breviaryScroll({scrollNum:1,displayLength:4,direction:"left"}); }) |
|
竖直滚动的代码如下(你可以更改插件的参数观看不同的效果，如把scrollNum改为2等)：
| 代码如下 | 复制代码 |
|
ul,li{margin:0;padding:0;list-style:none} |
|
上一页
■1
■2
■3
■4
■5
■6
■7
■8
■9
.下一页
| 代码如下 | 复制代码 |
| .jQuery(function(){ jQuery("#imageList").breviaryScroll({scrollNum:1,displayLength:4,direction:"top"}); }) |
|
-
上一个： js中数组的排序sort方法的原理
-
下一个： XSLT递归获取主分类名称列表实例
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31