基于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 的 trim 函数的代码
Aug 13 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
用php将任何格式视频转为flv的代码
2009/09/03 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
pytorch 模型可视化的例子
2019/08/17 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
初三班主任寄语大全
2014/04/04 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
安全承诺书格式范本
2015/04/28 职场文书
民事起诉状范文
2015/05/19 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL