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


Posted in Javascript onJanuary 02, 2014

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

效果如下所示:

利用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>
</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--;
   }
  }
    });
});
Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
layerUI下的绑定事件实例代码
Aug 17 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 #Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 #Javascript
js判断字符长度以及中英文数字等
Dec 31 #Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 #Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 #Javascript
You might like
菜鸟修复电子管记
2021/03/02 无线电
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Numpy之reshape()使用详解
2019/12/26 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
英国电子专家:maplin
2019/09/04 全球购物
高中校园广播稿
2014/01/11 职场文书
讲解员培训方案
2014/05/04 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
2015入党自传书范文
2015/06/26 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang