基于jQuery的左右滚动实现代码 - Web前端

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

标签：代码WebjQuery