利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
46 浏览量
2020-12-01
03:34:41
上传
评论
收藏 95KB PDF 举报
利用利用jQuery简单实现产品展示图片左右滚动功能简单实现产品展示图片左右滚动功能(示例代码示例代码)
最近要做一个产品展示功能，由于产品比较多，一屏展示不完，所以想要做一个通过点击进行翻页的效果，在网上找了几个都
不大好用，最后只能自己动手写了。
效果如下所示：效果如下所示：
原理比较简单：原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一
页或下一页的按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，需要两
个div，外面的div的position设为retative，里面的DIV的position设为absolute。
主要代码如下：
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>
评论0