今天要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了。

效果如下所示:

原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的position设为absolute。

主要代码如下:

<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="data:images/product1.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><img src="data:images/product2.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><img src="data:images/product3.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><img src="data:images/product3.jpg"/></dt>
  <dd>数据采集移动终端</dd>
 </dl>
 <dl>
  <dt><img src="data:images/product1.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="data:images/product1.jpg"/></dt>
  <dd>数据采集移动终端1</dd>
 </dl>
 <dl>
  <dt><img src="data: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--;
   }
  }
    });
});

使用jQuery简单实现产品展示的图片左右滚动功能的更多相关文章

  1. 【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

    摘要:本文记录创建一个小的.简单的产品网站的步骤. 一,搭建一个简单的产品展示网站,熟悉以下知识点:NVelocity模板引擎.Ajax无刷新页面请求,文件上传,Row_Number实现分页,ckEd ...

  2. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  3. 精致3D图片切换效果,最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  4. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  5. 从产品展示页面谈谈Hybris的特有概念和设计结构

    今天这篇文章来自我的同事,SAP成都研究院Hybris开发团队的开发人员Zhang Jonathan(张健).需要特别介绍的是,张健和成都研究院的其他开发同事不同,张健毕业于电子科技大学,读的专业是英 ...

  6. 从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator

    文章作者:张健(Zhang Jonathan) 上一篇文章 从产品展示页面谈谈Hybris的特有概念和设计结构 我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...

  7. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  8. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  9. jQuery实现等比例缩放大图片

      在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...

随机推荐

  1. Sublime的快捷键的使用

    Default Keymap 1. Ctrl+L 选择整行(按住-继续选择下行) 2. Ctrl+Shift+K(shhift+del) 删除整行, ctrl + KK 从光标处删之行尾,Ctrl+K ...

  2. Linux下tomcat作为守护进程运行(开机启动、以指定的用户运行、解决非root身份不能绑定1024以下端口的问题)的配置方法

    如题. 参考资料: http://www.jdiy.org/read.jd?id=y0haaynq1w http://blog.csdn.net/shw2004/article/details/578 ...

  3. Why The Golden Age Of Machine Learning is Just Beginning

    Why The Golden Age Of Machine Learning is Just Beginning Even though the buzz around neural networks ...

  4. 一大早居然有骗子还是傻子,真是莫名其妙的,QQ1913522040,一看就是刚申请不久的

  5. VS2013 EMMET插件学习

    在VS2013中搜索EMMET插件,安装,重启IDE,即可使用. 最简单的一个用法示例: 在编辑器里输入:ul>li*5 按快捷键:CTRL+1 即可生成如下代码: <ul> < ...

  6. IE浏览器模式设置

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE ...

  7. HTML常见标签总结

    什么是浏览器 解释和执行HTML源码的工具 五大浏览器:IE.FF(FireFox)(火狐).Chrome(谷歌).Opera(空中).Safari(Apple)(苹果) IE用的是Trident引擎 ...

  8. 繁华模拟赛 ljw搭积木

    #include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...

  9. POJ 2503 Babelfish

    Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 28766 Accepted: 12407 Descripti ...

  10. 文字编辑器kindeditor-min.js的使用

    例子: <link rel="stylesheet" type="text/css" href="<?=$WebSiteRootDir?& ...