提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery产品代码 实现 简单 利用 功能 示例
2023-06-13 09:15:15 时间

最近要做一个产品展示功能，由于产品比较多，一屏展示不完，所以想要做一个通过点击进行翻页的效果，在网上找了几个都不大好用，最后只能自己动手写了。

效果如下所示：



原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一页或下一页的按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，需要两个div，外面的div的position设为retative，里面的DIV的position设为absolute。

主要代码如下：

HTML:

复制代码代码如下:

<divid="product">
 <h2><spanclass="arrow">arrow</span>产品展示</h2>
 <spanclass="prev"></span>
 <divid="content">
 <divid="content_list">
 <dl>
  <dt><imgsrc="images/product1.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product2.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product3.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product3.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product1.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product1.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><imgsrc="images/product1.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 </div>
 </div>
 <spanclass="next"></span>
</div>

CSS:
复制代码代码如下:

#product{
 width:720px;
 height:200px;
 border:1pxsolid#ccc;
 margin:05px5px0;
 float:left;
}
#productdiv#content{
 position:relative;
 width:690px;
 height:160px;
 display:inline-block;
 overflow:hidden;
 float:left;
}
#productdiv#content_list{
 position:absolute;
 width:4000px;
}
#productdl{
 width:160px;
 height:150px;
 float:left;
 margin:10px4px;
 padding:2px2px;
}
#productdl:hover{
 border:1pxsolid#333;
 background:#ccc;
}
#productdldt{

}
#productdldtimg{
 width:160px;
 height:120px;
 border:none;
}
#productdldd{
 text-align:center;
}
#productspan.prev{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/arrow_l.gif)no-repeatleftcenter;
 float:left;
}
#productspan.next{
 cursor:pointer;
 display:inline-block;
 width:15px;
 height:150px;
 background:url(../images/arrow_r.gif)no-repeatleftcenter;
 float:right;
}

js代码
复制代码代码如下:
$(function(){
   varpage=1;
   vari=4;//每版放4个图片
   //向后按钮
   $("span.next").click(function(){   //绑定click事件
  varcontent=$("div#content");
  varcontent_list=$("div#content_list");
  varv_width=content.width();
  varlen=content.find("dl").length;
  varpage_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(){
    varcontent=$("div#content");
  varcontent_list=$("div#content_list");
  varv_width=content.width();
  varlen=content.find("dl").length;
  varpage_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--;
   }
  }
   });
});

相关文章