兩個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++; //版面數累加
}
}
});
});