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

<divclass=”box”>
<divclass=”box-li”>
<ul>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<ul>
</div>
<div>
<spanid=”next”>向右移动</span>
<spanid=”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-liul{
width:100000px;/*不加次数据IE中数据会自动换行*/
white-space:nowrap;
}
.box-lili{
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++;//版面数累加
}
}
});
});