闲来无事,继续封装。此次封装的为水平滚轴组件,可选择滚动的距离大小。闲话不多说,直接上图。

参数说明:

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如下:

<div class="scroll-banner">
<span class="pre-scroll iconfont"></span>
<span class="next-scroll iconfont"></span>
<div class="scroll-main">
<ul>
<li><a href="#"><img src="data:images/scroll-pic.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic2.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic3.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic4.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic2.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic4.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic.jpg"></a></li>
<li><a href="#"><img src="data:images/scroll-pic2.jpg"></a></li>
</ul>
</div>
</div>

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:;
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
});

基于jquery的水平滚轴组件,多参数可设置。的更多相关文章

  1. 基于jquery的垂直滚动触发器,多参数可设置。

    最近闲来无事,多封装些功能性组件.后期会有更多放出来,大家可以多关注一下. 先上参数: type:"show",           默认为“show”,“show”意为当能够在可 ...

  2. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  3. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  4. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  5. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  6. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  7. 基于jQuery封装的分页组件(可自定义设置)

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  8. jquery 滚轴滚动 导航定位和锚点定位

    自己写的,只测试了ie9+, firefox,chrome 以下js更好 var fixbar={ init:function(){ "use strict"; // 滚轴 导航位 ...

  9. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

随机推荐

  1. Java中如何遍历Map对象

    方法一:使用map.entrySet()来遍历.这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要的时候使用. Map<String,String> map = new Ha ...

  2. Redis记录-Redis介绍

    Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. Redis有三个主要特点,使它优越于其它键值数据存储系统 - Redis将其数据库完全保存在内存中, ...

  3. bzoj千题计划289:bzoj 2707: [SDOI2012]走迷宫

    http://www.lydsy.com/JudgeOnline/problem.php?id=2707 dp[i] 表示从点i到终点的期望步数 dp[i]= Σ (dp[j]+1)/out[i] j ...

  4. Matrix67|自由职业者,数学爱好者

    Matrix67|自由职业者,数学爱好者 介绍一下你自己和所做的工作. 我叫顾森,网名 Matrix67,长住北京的重庆人,目前没有固定的职业.一会儿当当码农,一会儿做做编辑,一会儿教教数学,一会儿写 ...

  5. Selenium学习(Python)

    #从Selenium中导入Webdriver类,该类中定义了selenium支持的浏览器 # webdriver.Firefox # webdriver.FirefoxProfile # webdri ...

  6. 【51Nod】1920 空间统计学 状压DP

    [题目]1920 空间统计学 [题意]给定m维空间中的n个点坐标,满足每一维坐标大小都在[0,3]之间,现在对于[0,3*m]的每个数字x统计曼哈顿距离为x的有序点对数.\(n \leq 2*10^5 ...

  7. Js表单验证控件

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  8. 查询总结、HQL语法、QBC(QueryByCriteria)深入学习

    1.查询总结 在之前的批量查询练习的时候练习基本五种查询方法的使用: 1.OID查询---根据对象ID进行查询 2.对象属性导航查询: obj.getXXX 3.HQL查询:Query对象查询 4.Q ...

  9. 新手学习爬虫之创建第一个完整的scrapy工程-糗事百科

    创建第一个scrapy工程-糗事百科 最近不少小伙伴儿,问我关于scrapy如何设置headers的问题,时间久了不怎么用,还真有的忘,全靠记忆去写了,为了方便大家参考,也方便我以后的查阅,这篇文章就 ...

  10. CodeSmith的基础模版类(CodeSmith help中的内容)

    基础模版类类型描述: Batch      OutputFileCodeTemplate  模版通过继承此类能够在生成过程中把他们的输出保存到文件中 ScriptError    在脚本执行中出现一个 ...