基于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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
详解webpack 热更新优化
Sep 13 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 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
linux下php上传文件注意事项
2016/06/11 PHP
php生出随机字符串
2017/07/06 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python利用拉链法实现字典方法示例
2017/03/25 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
英语简历自我评价
2014/01/26 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
班子四风对照检查材料
2014/08/21 职场文书
Python实现拼音转换
2021/06/07 Python