利用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 相关文章推荐
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
树结构之JavaScript
Jan 24 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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/08/26 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python多线程操作实例
2014/11/21 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
wxpython布局的实现方法
2019/11/01 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Java面向对象面试题
2016/12/26 面试题
酒店端午节促销方案
2014/02/18 职场文书
感谢信范文大全
2015/01/23 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年质检工作总结
2015/05/04 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
springboot如何初始化执行sql语句
2021/06/22 Java/Android