利用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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 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读取msn上的用户信息类
2008/12/05 PHP
php笔记之常用文件操作
2010/10/12 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
使用matplotlib画散点图的方法
2018/05/25 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
培训演讲稿范文
2014/01/12 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
小学班主任教育随笔
2015/08/15 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android