<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
var page = 1;
var i = 4; //每版放4個圖片
var len = $(".prolist_content ul li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
var none_unit_width = $(".prolist").width(); //獲取框架內容的寬度,不帶單位
var $parent = $(".prolist_content");
//向右 按鈕
$(".goRight").click(function(){
if( !$parent.is(":animated") ){
if( page == page_count ){ //已經到最後一個版面了,如果再向後，必須跳轉到第一個版面。
$parent.animate({ left : 0}, 800); //通過改變left值，跳轉到第一個版面
page = 1;
}else{
$parent.animate({ left : '-='+none_unit_width}, 800); //通過改變left值，達到每次換一個版面
page++;
}
}
});
//往左 按鈕
$(".goLeft").click(function(){
if( !$parent.is(":animated") ){
if( page == 1 ){ //已經到第一個版面了,如果再向前，必須跳轉到最後一個版面。
$parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通過改變left值，跳轉到最後一個版面
page = page_count;
}else{
$parent.animate({ left : '+='+none_unit_width }, 800); //通過改變left值，達到每次換一個版面
page--;
}
}
});
});
</script>
<style>
/*右側樣式*/
*{ margin:0px; padding:0px;}
.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}
/*新款上市樣式*/
.prolist {
position:relative;
height: 220px;
margin-bottom:10px;
overflow:hidden;
border: 1px solid #AAAAAA;
background:#FFFFFF;
}
.prolist .prolist_content{
position:absolute;
width:1800px;
top:26px;
left:0px;
padding:20px 0 0 8px;
}
.prolist ul{
margin-bottom:10px;
float:left;
height: 220px;
padding:0px;
}
.prolist ul li {
float:left;
display:inline;
text-align:center;
margin-right:22px;
}
.prolist ul li span {
display:block;
overflow:hidden;
}
.prolist ul li img {
display:block;
width:124px;
height:124px;
background:#EEE; border:0;
}
.module_left_right{
position:absolute;
top:5px;
right:10px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="content_right prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
</div>
</body>
</html>
效果圖：
