自己写jQuery代码实现产品展示的图片左右滚动功能详解

html 主要代码：

<div id="product">  
    <h2><span class="arrow">arrow</span>产品展示</h2>  
    <span class="prev"></span>  
    <div id="content">  
    <div id="content_list">  
    <dl>  
        <dt><img src="images/product1.jpg"/></dt>  
        <dd>数据采集移动终端</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product2.jpg"/></dt>  
        <dd>数据采集移动终端</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product3.jpg"/></dt>  
        <dd>数据采集移动终端</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product3.jpg"/></dt>  
        <dd>数据采集移动终端</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product1.jpg"/></dt>  
        <dd>数据采集移动终端1</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product1.jpg"/></dt>  
        <dd>数据采集移动终端1</dd>  
    </dl>  
    <dl>  
        <dt><img src="images/product1.jpg"/></dt>  
        <dd>数据采集移动终端1</dd>  
    </dl>  
    </div>  
    </div>  
    <span class="next"></span>  
</div>

CSS代码:

#product {  
    width:720px;  
    height:200px;  
    border:1px solid #ccc;  
    margin:0 5px 5px 0;  
    float:left;  
}  
#product div#content {  
    position:relative;  
    width:690px;  
    height:160px;  
    display:inline-block;  
    overflow:hidden;  
    float:left;  
}  
#product div#content_list {  
    position:absolute;  
    width:4000px;  
}  
#product dl{  
    width:160px;  
    height:150px;  
    float:left;  
    margin:10px 4px;  
    padding:2px 2px;  
}  
#product dl:hover {  
    border:1px solid #333;  
    background:#ccc;  
}  
#product dl dt {  
      
}  
#product dl dt img {  
    width:160px;  
    height:120px;  
    border:none;  
}  
#product dl dd {  
    text-align:center;  
}  
#product span.prev{  
    cursor:pointer;  
    display:inline-block;  
    width:15px;  
    height:150px;  
    background:url(../images/arrow_l.gif) no-repeat left center;  
    float:left;  
}  
#product span.next{  
    cursor:pointer;  
    display:inline-block;  
    width:15px;  
    height:150px;  
    background:url(../images/arrow_r.gif) no-repeat left center;  
    float:right;  
}

js代码：

$(function(){  
    var page = 1;  
    var i = 4; //每版放4个图片  
    //向后 按钮  
    $("span.next").click(function(){    //绑定click事件  
         var content = $("div#content");   
         var content_list = $("div#content_list");  
         var v_width = content.width();  
         var len = content.find("dl").length;  
         var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数  
         if( !content_list.is(":animated") ){    //判断“内容展示区域”是否正在处于动画  
              if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。  
                content_list.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面  
                page = 1;  
              }else{  
                content_list.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面  
                page++;  
             }  
         }  
   });  
    //往前 按钮  
    $("span.prev").click(function(){  
         var content = $("div#content");   
         var content_list = $("div#content_list");  
         var v_width = content.width();  
         var len = content.find("dl").length;  
         var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数  
         if(!content_list.is(":animated") ){    //判断“内容展示区域”是否正在处于动画  
             if(page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。  
                content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");  
                page = page_count;  
            }else{  
                content_list.animate({ left : '+='+v_width }, "slow");  
                page--;  
            }  
        }  
    });  
});