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

参数说明:

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. NO.6: 若不想编译器提供自动生成的函数,就应该明确拒绝

    1.为驳回编译器自动生成函数的技能,可把这些函数的声明放入private,如果是继承类型可把base class的这些函数声明private,可在编译期间得到警告

  2. 集合框架基础知识-----java基础知识

    Java集合框架 :接口:Collection.List .Set. Map:实现类:ArrayList.LinkedList.Vector.HashSet.TreeSet.HashMap.HashT ...

  3. RabbitMQ的安装部署

    RabbitMQ安装部署 一.软件准备 wget http://erlang.org/download/otp_src_19.3.tar.gz wget http://www.rabbitmq.com ...

  4. bzoj千题计划226:bzoj2763: [JLOI2011]飞行路线

    http://www.lydsy.com/JudgeOnline/problem.php?id=2763 这也算分层图最短路? dp[i][j]到城市i,还剩k次免费次数的最短路 #include&l ...

  5. Your Prediction Gets As Good As Your Data

    Your Prediction Gets As Good As Your Data May 5, 2015 by Kazem In the past, we have seen software en ...

  6. html5 canvas文本处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 20155230 2016-2017-2 《Java程序设计》第九周学习总结

    20155230 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 statement在不使用时所关联的resultset也会自动关闭. 要让SQL执 ...

  8. iOS问题#解决方案#之关于“application/x-www-form-urlencoded;charset=utf-8” not supported

    http://www.cnblogs.com/ChenYilong   http://www.cnblogs.com/ChenYilong   如果你用的是AFN/ASI,那得修改源代码了,因为AFN ...

  9. <header><footer>引用

    示例:http://www.w3school.com.cn/html/html_layout.asp

  10. matrix 矩阵(多维DP)

    题面 \(solution:\) 这一题其实就是一个非常明显的三维背包问题(但博主太弱了就10分QAQ) \(F[i][j][k]:\)表示走到\((i,j)\)这个位置并且背包容量为 \(k\) 时 ...