【js与jquery】产品列表横向滚动效果

1.效果如图所示：

 

2.html代码：

<div class="global_module 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>

3.jquery代码：

/*新款上市模块横向滚动*/
//当单击产品列表右上角的"左右"按钮时,产品列表就可以按照单击的方向横向滚动
$(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--;
			}
		}
    });
});