利用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动态呼叫函数(两种方式)
May 03 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
Vue异步加载about组件
Oct 31 Javascript
React中的render何时执行过程
Apr 13 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
vue之延时刷新实例
2019/11/14 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python输出各行命令详解
2018/02/01 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
postman传递当前时间戳实例详解
2019/09/14 Python
基于python 取余问题(%)详解
2020/06/03 Python
python怎么提高计算速度
2020/06/11 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
九年级历史教学反思
2014/01/27 职场文书
小王子读书笔记
2015/06/29 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书