基于jQuery的左右滚动实现代码


Posted in Javascript onDecember 03, 2010

两个div。
一个div为固定宽度 。在次div中内嵌一个div ,这个为数据列。

<div class=”box”> 
<div class=”box-li”> 
<ul> 
<li>数据2</li> 
<li>数据2</li> 
<li>数据2</li> 
<li>数据2</li> 
<li>数据2</li> 
<li>数据2</li> 
<ul> 
</div> 
<div> 
<span id=”next”>向右移动</span> 
<span id=”pre”>向左移动</span> 
样式表 
.box{ 
float: left; 
height: 93px; 
width: 560px; 
left:0px; 
white-space:nowrap; 
overflow:hidden; 
position:relative /* 不加次属性在ie7中无法隐藏内容*/ 
} 
.box-li{ 
float: left; 
height: 90px; 
left:0px; 
position:relative; 
white-space:nowrap; 
clear: both; 
} 
.box-li ul{ 
width:100000px; /* 不加次数据IE中数据会自动换行*/ 
white-space:nowrap; 
} 
.box-li li{ 
margin-left:0px; 
margin-right:0px; 
float: left; 
text-align:center; 
width: 92px; 
} 
$(function () { 
var $cur = 1; //初始化显示的版面 
var $i= 6; //每版显示数 
var $len = $('.box-li>ul>li').length; //计算列表总长度(个数) 
var $pagecount = Math.ceil($len / $i); //计算展示版面数量 
var $showbox = $('.box'); 
var $w = $('.box').width(); //取得展示区外围宽度 
var $pre = $('#pre'); 
var $next = $('#next'); 
//向前滚动 
$pre.click(function () { 
if (!$showbox.is(':animated')) { //判断展示区是否动画 
if ($cur == 1) { //在第一个版面时,再向前滚动无动作 } 
else { 
$showbox.animate({ 
left: '+=' + $w 
}, 600); //改变left值,切换显示版面 
$cur--; //版面累减 
} 
} 
}); 
//向后滚动 
$next.click(function () { 
if (!$showbox.is(':animated')) { //判断展示区是否动画 
if ($cur == $pagecount) { //在最后一个版面时,再向后滚动无动作 } 
else { 
$showbox.animate({ 
left: '-=' + $w 
}, 600); //改变left值,切换显示版面 
$cur++; //版面数累加 
} 
} 
}); 
});
Javascript 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
JavaScript 不只是脚本
May 30 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 #Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 #Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 #Javascript
浅析jQuery的链式调用之each函数
Dec 03 #Javascript
jQuery的链式调用浅析
Dec 03 #Javascript
加速IE的Javascript document输出的方法
Dec 02 #Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 #Javascript
You might like
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python 绘制正态曲线的示例
2020/09/24 Python
简约控的天堂:The Undone
2016/12/21 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
黄河的主人教学反思
2014/02/07 职场文书
期末评语大全
2014/05/04 职场文书
树转促学习心得体会
2014/09/10 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
校本培训个人总结
2015/02/28 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
带你学习MySQL执行计划
2021/05/31 MySQL
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Mysql排序的特性详情
2021/11/01 MySQL