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

两个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++; //版面数累加 
} 
} 
}); 
});