<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”>向右移動(dòng)</span>
<span id=”pre”>向左移動(dòng)</span>
樣式表
.box{
float: left;
height: 93px;
width: 560px;
left:0px;
white-space:nowrap;
overflow:hidden;
position:relative /* 不加次屬性在ie7中無(wú)法隱藏內(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ù)會(huì)自動(dòng)換行*/
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ì)算列表總長(zhǎng)度(個(gè)數(shù))
var $pagecount = Math.ceil($len / $i); //計(jì)算展示版面數(shù)量
var $showbox = $('.box');
var $w = $('.box').width(); //取得展示區(qū)外圍寬度
var $pre = $('#pre');
var $next = $('#next');
//向前滾動(dòng)
$pre.click(function () {
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動(dòng)畫(huà)
if ($cur == 1) { //在第一個(gè)版面時(shí),再向前滾動(dòng)無(wú)動(dòng)作 }
else {
$showbox.animate({
left: '+=' + $w
}, 600); //改變left值,切換顯示版面
$cur--; //版面累減
}
}
});
//向后滾動(dòng)
$next.click(function () {
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動(dòng)畫(huà)
if ($cur == $pagecount) { //在最后一個(gè)版面時(shí),再向后滾動(dòng)無(wú)動(dòng)作 }
else {
$showbox.animate({
left: '-=' + $w
}, 600); //改變left值,切換顯示版面
$cur++; //版面數(shù)累加
}
}
});
});