使用jQuery简单实现产品展示图片的左右滚动功能(示例代码)

最近想做一个产品展示功能。因为产品多，一屏无法显示，所以想通过点击做一个翻页效果。我在网上找到了一些，但是都不是很好用。最后只能自己写了。效果如下：。

原理比较简单：将要滚动显示的区域的半铸钢钢性铸铁(铸造半钢)的推翻设为隐藏的，宽度设成一个比较大的值，如4000像素，然后每次点击上一页或下一页的按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制差异的左边的属性实现的，需要两个div，外面的差异的位置设为积极的，里面的差异的位置设为绝对的。主要代码如下：HTML:复制代码代码如下： div id=' product ' H2 span class=' arrow '箭头/span产品展示/H2 span class=' prev '/span div id=' content ' div id=' content _ list ' dldtimg src=' http : images/product 1。jpg '/dtdd数据采集移动终端/DD/dldldldtimg src=' http : images/product 2。jpg '/dtdd数据采集移动终端/DD/dldldldtimg src=' http : images/product 3。jpg '/dtdd数据采集移动终端/DD/dldldldtimg src=' http : images/product 3。jpg '/dtdd数据采集移动终端/DD/dldldldtimg src=' http : images/product 1。jpg '/dtdd数据采集移动终端1/DD/dldldldtimg src=' http : images/product 1。jpg '/dtdd数据采集移动终端1/DD/dldldldtimg src=' http : images/product 1。jpg '/dtdd数据采集移动终端1/DD/dl/div/div span class=' next '/span/div CSS :复制代码代码如下： #产品{宽度：720像素高度：200 pxborder:1px固体# cccmargin :0 5px 5px 0；float:left} #产品div #内容{位置：相对；宽度：690像素；高度：160 px显示：内嵌块；飞越：隐藏；float : left } # product div # content _ list { position : absolute；宽度宽度：4000px} #产品dl { width:160px高度：150 pxfloat : leftmargin :10 px 4 xpadding :2 px 2px } #产品dl :悬停{边框：1 px实心# 333；背景# ccc} #产品dl dt { } #产品dl dt img { width :160 px高度：120 pxborder:none} #产品dl DD { text-align :居中；} #产品跨度。prev { cursor :指针；显示：内嵌块；宽度：15 px高度：150 px背景：url(./images/arrow_l.gif)不重复左中；float:left} #产品跨度。下一个{光标：指针；显示：内嵌块；宽度：15 px高度：150 px背景：url(./images/arrow_r.gif)不重复左中；右浮动：}js代码复制代码代码如下： $(function(){ var page=1；var I=4；//每版放四个图片//向后按钮$(“跨度。下一个).单击(函数(){ //绑定点击事件var content=$(' div # content ')；var content _ list=$(' div # content _ list ')；var v _ width=内容。宽度()；var len=content.find('dl ').长度；var page _ count=数学。天花板(透镜/1)；//只要不是整数，就往大的方向取最小的整数if(！内容列表。是(' :动画'){//判断"内容展示区域"是否正在处于动画if(page==page_count ){ //已经到最后一个版面了，如果再向后，必须跳转到第一个版面内容列表。动画({ left : ' 0px ' }，' slow ')；//通过改变左边的值，跳转到第一个版面page=1；} else { content _ list。动画({ left : '-=' v _ width }，' slow ')；//通过改变左边的值，达到每次换一个版面页面；} } });//往前按钮$(“跨度。上一个).click(function(){ var content=$(' div # content ')；var content _ list=$(' div # content _ list ')；var v _ width=内容。宽度()；var len=content.find('dl ').长度；var page _ count=数学。天花板；//只要不是整数，就往大的方向取最小的整数if(！内容列表。是(' :动画'){//判断"内容展示区域"是否正在处于动画if(page==1 ){ //已经到第一个版面了，如果再向前，必须跳转到最后一个版面内容列表。动画({ left : '-=' v _ width *(page _ count-1)}，' slow ')；page=page _ count } else { content _ list。动画({ left : '=' v _ width }，' slow ')；页面-;}} });});