首页 > 代码库 > 使用jQuery简单实现产品展示的图片左右滚动功能
使用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="http://www.mamicode.com/images/product1.jpg"/></dt> <dd>数据采集移动终端</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/images/product2.jpg"/></dt> <dd>数据采集移动终端</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/images/product3.jpg"/></dt> <dd>数据采集移动终端</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/images/product3.jpg"/></dt> <dd>数据采集移动终端</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/images/product1.jpg"/></dt> <dd>数据采集移动终端1</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/images/product1.jpg"/></dt> <dd>数据采集移动终端1</dd> </dl> <dl> <dt><img src="http://www.mamicode.com/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--; } } });});
使用jQuery简单实现产品展示的图片左右滚动功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。