<div class=”box”>
<div class=”box-li”>
<ul>
<li>數(shù)據(jù)2</li>
<li>數(shù)據(jù)2</li>
<li>數(shù)據(jù)2</li>
<li>數(shù)據(jù)2</li>
<li>數(shù)據(jù)2</li>
<li>數(shù)據(jù)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中無法隱藏內(nèi)容*/
}
.box-li{
float: left;
height: 90px;
left:0px;
position:relative;
white-space:nowrap;
clear: both;
}
.box-li ul{
width:100000px; /* 不加次數(shù)據(jù)IE中數(shù)據(jù)會自動換行*/
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; //每版顯示數(shù)
var $len = $('.box-li>ul>li').length; //計(jì)算列表總長度(個數(shù))
var $pagecount = Math.ceil($len / $i); //計(jì)算展示版面數(shù)量
var $showbox = $('.box');
var $w = $('.box').width(); //取得展示區(qū)外圍寬度
var $pre = $('#pre');
var $next = $('#next');
//向前滾動
$pre.click(function () {
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫
if ($cur == 1) { //在第一個版面時,再向前滾動無動作 }
else {
$showbox.animate({
left: '+=' + $w
}, 600); //改變left值,切換顯示版面
$cur--; //版面累減
}
}
});
//向后滾動
$next.click(function () {
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫
if ($cur == $pagecount) { //在最后一個版面時,再向后滾動無動作 }
else {
$showbox.animate({
left: '-=' + $w
}, 600); //改變left值,切換顯示版面
$cur++; //版面數(shù)累加
}
}
});
});