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

最新推荐文章于 2021-05-31 08:02:56 发布

伴而不弃

最新推荐文章于 2021-05-31 08:02:56 发布

阅读量1.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/jokewang5199/article/details/42721093

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/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;
}
</style>
</head>
<body>
	  
	<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><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><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><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">sfs</span>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(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--;
			}
		}
    });
});
</script>
</body>

</html>