最近要做一個產品展示功能，由於產品比較多，一屏展示不完，所以想要做一個透過點擊進行翻頁的效果，在網路上找了幾個都不大好用，最後只能自己動手寫了。
效果如下圖：
原理比較簡單：將要捲動顯示的區域的CSS的override設為hidden，寬度設為一個比較大的值，如4000px,然後每次點擊上一頁或下一頁的按鈕時，計算當前頁數，如果已經到了最後一頁，則回到第一頁，滾動是透過控制div的left屬性來實現的，需要兩個div，外面的div的position設為retative，裡面的DIV的position設為absolute。
主要程式碼如下：
HTML:
CSS:
程式碼>#product {
width:720px;
height:200px;
border:1px solid #ccc;
margin:0 5px 5px solid #ccc;
margin:0 5px 5px solid #ccc;
margin:0 5px 5px 0;
#product div#content {
position:relative;
width:690px;
height:160px;
display:inline-block;}
#product div#content_list {
position:absolute;
width:4000px;
}
#product dl{ float:left;
margin:10px 4px;
padding:2px 2px;
}
#product :2px 2px;
}
#product dl:hoverd
background:#ccc;
}
#product dl dt {
}
#product dl dt img {
width:160px;<10px>
