利用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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
从vue源码看props的用法
Jan 09 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
JS array数组检测方式解析
May 19 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP 代码规范小结
2012/03/08 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
微信支付开发告警通知实例
2016/07/12 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
python 判断一个进程是否存在
2009/04/09 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
亮剑精神观后感
2015/06/05 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python