利用jQuery簡單實作產品展示圖片左右滾動功能(範例程式碼)_jquery

最近要做一個產品展示功能，由於產品比較多，一屏展示不完，所以想要做一個透過點擊進行翻頁的效果，在網路上找了幾個都不大好用，最後只能自己動手寫了。

效果如下圖：



原理比較簡單：將要捲動顯示的區域的CSS的override設為hidden，寬度設為一個比較大的值，如4000px,然後每次點擊上一頁或下一頁的按鈕時，計算當前頁數，如果已經到了最後一頁，則回到第一頁，滾動是透過控制div的left屬性來實現的，需要兩個div，外面的div的position設為retative，裡面的DIV的position設為absolute。

主要程式碼如下：

HTML:

複製程式碼 程式碼如下:

 

arrow產品展示

 
 

 

 

  

  

資料擷取行動終端

 

 

  

  

資料擷取行動終端

 

 

  

  

資料擷取行動終端

 

 

  

  

資料擷取行動終端

 

 

  

  

資料擷取行動終端機1

 

 

  

  

資料採集行動終端1

 

 

  

  

資料擷取行動終端1

 

 

 

 
div>

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>