HTML代码：
<div class="prolist"> <h3>新款上市</h3> <div class="prolist_content"> <ul> <li> <a href="detail.html"> <img src="images/img_1.jpg" title="免烫高支棉衬衣" 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>CSS样式：
.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; } .prolist ul li { float:left; display:inline; text-align:center; margin-right:22px; } .content_right .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; }jQuery代码：
$(function () { //定义变量 var page = 1; var i = 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 (page == page_count) { $parent.animate({ left: 0 }, 1000); page = 1; } else { //定义动画 $parent.animate({ left: "-=" + none_unit_width }, 1000); page++; } }); $(".goLeft").click(function () { //调用is方法 if (!$parent.is(":animated")) { if (page == 1) { $parent.animate({ left: "-=" + none_unit_width * (page_count - 1) }, 1000); page = page_count; } else { $parent.animate({ left: "+=" + none_unit_width }, 1000) page--; } } });