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

来源：互联网发布：java读取文件默认路径编辑：程序博客网时间：2024/05/10 09:12
<!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>
0 0