基于jquery的水平滚轴组件，多参数可设置。
本文共 2280 字，大约阅读时间需要 7 分钟。
闲来无事，继续封装。此次封装的为水平滚轴组件，可选择滚动的距离大小。闲话不多说，直接上图。
参数说明：
vis:4 中间区域可显示的 li 个数
scroll:4 每次滚过的li个数，若大于vis，则取 scroll%vis的余数 wrap:".scroll-main ul" 中间区域的包裹层选择器 item:".scroll-main ul li", 中间区域每个li的选择器 btnPre:".pre-scroll" 左滚按钮的选择器 btnNext:".next-scroll" 右滚按钮的选择器
html如下：
css如下：
.scroll-banner{ position:relative; }.scroll-main{ width:560px; margin:0 auto; overflow:hidden;}.scroll-main ul{ overflow:hidden; position:relative; left:0px;}.scroll-main ul li{ float:left; width:140px; height:120px; padding:0 10px;}.scroll-main ul li img{ width:100%; height:100%;}.pre-scroll,.next-scroll{ position: absolute; top:35px; color:#fff; z-index:100; cursor:pointer; font-size:40px;}.pre-scroll{ left:10px;}.next-scroll{ right:10px;} js如下:
function scrollBanner(obj){ this.set={ vis:4, scroll:4, wrap:".scroll-main ul", item:".scroll-main ul li", btnPre:".pre-scroll", btnNext:".next-scroll" } var _this=this; $.extend(this.set,obj) this.set.scroll=this.set.scroll>this.set.vis?this.set.scroll%this.set.vis:this.set.scroll; var itemNum=$(_this.set.item).length; var itemW=$(_this.set.item).outerWidth(); $(_this.set.wrap).css({"width":itemNum*itemW+"px"}) $(_this.set.btnPre).eq(0).click(function(){ var nowL=parseInt($(_this.set.wrap).eq(0).css("left")) if(nowL>=0){ $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":-(itemNum-_this.set.vis)*itemW+"px"}) }else{ $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":nowL+_this.set.scroll*itemW+"px"}) } }) $(_this.set.btnNext).eq(0).click(function(){ var nowL=parseInt($(_this.set.wrap).eq(0).css("left")) if(nowL<=-(itemNum-_this.set.vis)*itemW){ $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":"0px"}) }else{ $(_this.set.wrap+":not(:animated)").eq(0).animate({"left":nowL-_this.set.scroll*itemW+"px"}) } })}//调用new scrollBanner({ scroll:2});
转载地址：http://gnufz.baihongyu.com/
你可能感兴趣的文章
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8，体验不一样的安装方式！
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换（替换）两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全（参数来源于mysql5.5.19源码）
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>