基于jquery可配置循环左右滚动例子


Posted in Javascript onSeptember 09, 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>可配置横栏滚动Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
* { margin:0; padding:0;} 
body { font-size:12px;} 
</style> 
<script src="jquery-1.4.1.js" type="text/javascript"></script> 
<style type="text/css"> 
#scrollable { 
background-color:#efefef; 
border:1px solid #ddd; 
padding:10px 8px; 
width:523px; 
height:65px; 
margin-top:30px; 
} 
div.items { 
height:66px; 
margin-left:8px; 
float:left; 
width:475px !important; 
} 
div.items a { 
display:block; 
float:left; 
margin-right:8px; 
width:88px; 
height:66px; 
background:#BBB; 
font-size:50px; 
color:#ccc; 
line-height:66px; 
text-decoration:none; 
text-align:center; 
cursor:pointer; 
} 
div.items a:hover { 
color:#999; 
} 
div.items a.active { 
background-position:-174px 0; 
color:#555; 
cursor:default; 
} 
a.prev, a.next { 
background:url(left.png) no-repeat 0 0; 
display:block; 
width:18px; 
height:18px; 
float:left; 
margin:22px 0 0 0; 
cursor:pointer; 
} 
a.next { 
background-image:url(right.png) 
} 
a.prev:hover { 
background-position:0 -18px; 
} 
a.next:hover { 
background-position:0 -18px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
(function ($) { 
$.fn.extend({ 
Scroll: function (opt, callback) { 
if (!opt) var opt = {}; 
var _btnleft = $(opt.left); 
var _btnright = $(opt.right); 
var timerID; 
var _this = this.eq(0).find("div").eq(1); 
var lineW = _this.find("a:first").width(), //获取列宽 
line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10), //每次滚动的列数,默认为一屏,即父容器列宽 
speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度,数值越大,速度越慢(毫秒) 
timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔(毫秒) 
if (line == 0) line = 1; 
var upWidth = 0 - line * lineW; 
//滚动函数 
var scrollLeft = function () { 
if (!_this.is(":animated")) { 
_this.animate({ 
left: upWidth 
}, speed, function () { 
for (i = 1; i <= line; i++) { 
_this.find("a:first").appendTo(_this); 
} 
_this.css({ left: 0 }); 
}); 
} 
} 
var scrollRight = function () { 
if (!_this.is(":animated")) { 
for (i = 1; i <= line; i++) { 
_this.find("a:last").show().prependTo(_this); 
} 
_this.css({ left: upWidth }); 
_this.animate({ 
left: 0 
}, speed, function () { 
}); 
} 
} //Shawphy:自动播放 
var autoPlay = function () { 
if (timer) timerID = window.setInterval(scrollLeft, timer); 
}; 
var autoStop = function () { 
if (timer) window.clearInterval(timerID); 
};




//鼠标事件绑定 
_this.hover(autoStop, autoPlay).mouseout(); 
_btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay); 
_btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay); 
} 
}) 
})(jQuery); 
$(document).ready(function () { 
$("#scrollable").Scroll({ line: 5, speed: 500, timer: 3000, left: ".prev", right: ".next"}); 
}); 
</script> 
</head> 
<body> 
<div style="margin:0 auto;width:500px;"> 
<div id="scrollable"> 
<a class="prev" href="#"></a> 
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;"> 
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"> 
<a>1</a> 
<a>2</a> 
<a>3</a> 
<a>4</a> 
<a>5</a> 
<a>6</a> 
<a>7</a> 
<a>8</a> 
<a>9</a> 
<a>10</a> 
<a>11</a> 
<a>12</a> 
<a>13</a> 
<a>14</a> 
<a>15</a> 
</div> 
<br clear="all"/> 
</div> 
<a class="next" href="#"></a> 
</div> 
</div> 
</body> 
</html>

说明:1、需要两个图片

left.png:

基于jquery可配置循环左右滚动例子

right.png:

基于jquery可配置循环左右滚动例子

2、需要引入jquery的包,这个应该不用说的......

Javascript 相关文章推荐
JavaScript类库D
Oct 24 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
JS常见算法详解
Feb 28 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 #Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 #Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 #Javascript
yepnope.js 异步加载资源文件
Sep 08 #Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 #Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 #Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 #Javascript
You might like
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
PHP fclose函数用法总结
2019/02/15 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python实现实时监控文件的方法
2016/08/26 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python如何实现远程方法调用
2020/08/07 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
中软Java笔试题
2012/11/11 面试题
会议邀请函范文
2014/01/09 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL