利用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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
微信小程序实现购物车功能
Nov 18 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
php 团购折扣计算公式
2011/11/24 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
javascript数据类型示例分享
2015/01/19 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python基础之入门必看操作
2017/07/26 Python
用python制作游戏外挂
2018/01/04 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
教研活动主持词
2015/07/03 职场文书
区域销售大会开幕词
2016/03/04 职场文书