jQuery箭头切换图片

  • 布局
  • 3d位移 变形原点
  • jQuery

transform：translate3d（x,y,z）；

       x 代表横向坐标移向量的长度
       y 代表纵向坐标移向量的长度
       z 代表Z轴移向量的长度 取值不可为百

scale（） 缩放

transform-origin：0 50%；

       top left | left top 等价于 0 0
       top | top center | center top 等价于 50% 0
       right top | top right 等价于 100% 0
       left | left center | center left 等价于 0 50%
       center | center center 等价于 50% 50%（默认值）
       right | right center | center right 等价于 100% 50%
       bottom left | left bottom 等价于 0 100%
       bottom | bottom center | center bottom 等价于 50% 100%
       bottom right | right bottom 等价于 100% 100%

 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
 top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%；

HTML 部分

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>jQuery箭头按钮切换图片</title>
  6. <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
  7. </head>
  8. <body>
  9. <div class="box">
  10.  
  11.     <div class="list">
  12.         <ul>
  13.             <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>
  14.             <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>
  15.             <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>
  16.             <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>
  17.             <li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>
  18.             <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>
  19.             <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>
  20.         </ul>
  21.     </div>
  22.  
  23.     <a href="javascript:;" class="prev btn"><</a>
  24.     <a href="javascript:;" class="next btn">></a>
  25. </div>
  26. </body>
  27. </html>

CSS 部分

  1. <style type="text/css">
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.  
  7. .box{
  8.     margin-top: 80px;
  9.     width: 100%;
  10.     height: 340px;
  11.     position: relative; /* 相对定位 */
  12. }
  13.  
  14. .list{
  15.     width: 1200px;
  16.     height: 300px;
  17.     overflow: hidden;
  18.     position: absolute;
  19.     left: 50%;
  20.     margin-left: -600px;
  21. }
  22.  
  23. .btn{
  24.     position: absolute; /* 绝对定位 */
  25.     top: 50%;
  26.     margin-top: -50px;
  27.     width: 60px;
  28.     height: 100px;
  29.     line-height: 100px; /* 行高 */
  30.     font-size: 30px;
  31.     color: white;
  32.     text-decoration: none; /* 文本修饰 */
  33.     text-align: center;
  34.     background: rgba(0,255,0,.5);
  35.     cursor: pointer; /* 光标的样式 改为手指 */
  36. }
  37. .next{
  38.     right: 0;
  39. }
  40.  
  41. li{
  42.     position: absolute;
  43.     top: 0;
  44.     left: 0;
  45.     list-style: none;
  46.     opacity: 0;
  47.     transition: all 0.3s ease-out;
  48. }
  49. img{
  50.     width: 751px;
  51.     height: 300px;
  52.     border:none;
  53.     float: left;
  54. }
  55. .p1{
  56.     transform:translate3d(-224px,0,0) scale(0.81);
  57.     /* 3d位移 x,y,z
  58.        x 代表横向坐标移向量的长度
  59.        y 代表纵向坐标移向量的长度
  60.        z 代表Z轴移向量的长度 取值不可为百分比
  61.      */
  62. }
  63. .p2{
  64.     transform:translate3d(0px,0,0) scale(0.81);
  65.     transform-origin:0 50%;  /* 变形原点 */
  66.     /*  top left | left top 等价于 0 0
  67.         top | top center | center top 等价于 50% 0
  68.         right top | top right 等价于 100% 0
  69.         left | left center | center left 等价于 0 50%
  70.         center | center center 等价于 50% 50%（默认值）
  71.         right | right center | center right 等价于 100% 50%
  72.         bottom left | left bottom 等价于 0 100%
  73.         bottom | bottom center | center bottom 等价于 50% 100%
  74.         bottom right | right bottom 等价于 100% 100%
  75.      */
  76.      /*
  77.         left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
  78.         top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;        如果只取一个值，表示垂直方向值不变。
  79.       */
  80.  
  81.     opacity: 0.8;
  82.     z-index: 2;
  83. }
  84. .p3{
  85.     transform:translate3d(224px,0,0) scale(1);
  86.     z-index: 3;
  87.     opacity: 1;
  88. }
  89. .p4{
  90.     transform:translate3d(449px,0,0) scale(0.81);
  91.     transform-origin:100% 50%;
  92.     opacity: 0.8;
  93.     z-index: 2;
  94. }
  95. .p5{
  96.     transform:translate3d(672px,0,0) scale(0.81);
  97. }
  98. .p6{
  99.     transform:translate3d(896px,0,0) scale(0.81);
  100. }
  101. .p7{
  102.     transform:translate3d(1120px,0,0) scale(0.81);
  103. }
  104.  
  105. </style>

JavaScript 部分

  1. <script type="text/jscript">
  2. var cArr=["p7","p6","p5","p4","p3","p2","p1"];
  3. var index=0;
  4. $(".next").click( //下一张
  5.     function(){
  6.     nextimg();
  7.     }
  8. )
  9. $(".prev").click( //上一张
  10.     function(){
  11.     previmg();
  12.     }
  13. )
  14. //上一张
  15. function previmg(){
  16.     cArr.unshift(cArr[6]); //向数组的开头添加一个或更多元素 并返回新的长度
  17.     cArr.pop(); //移除最后一个元素
  18.     //i是元素的索引，从0开始
  19.     //e为当前处理的元素
  20.     //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
  21.     $("li").each(function(i,e){
  22.         $(e).removeClass().addClass(cArr[i]);
  23.     })
  24.     index--;
  25.     if (index<0) {
  26.         index=6;
  27.     }
  28.     show();
  29. }
  30.  
  31. //下一张
  32. function nextimg(){
  33.     cArr.push(cArr[0]); //向数组的末尾添加一个或更多元素 并返回新的长度
  34.     cArr.shift(); //删除元素数组中的第一个值 并返回
  35.     $("li").each(function(i,e){
  36.         $(e).removeClass().addClass(cArr[i]);
  37.     })
  38.     index++;
  39.     if (index>6) {
  40.         index=0;
  41.     }
  42.     show();
  43. }
  44. </script>

此文到此结束

此文参考 http://www.w3cplus.com/css3/css3-3d-transform.html

jQuery箭头切换图片 - 学习笔记的更多相关文章

  1. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  2. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  3. 锋利的jQuery第2版学习笔记8~11章

    第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...

  4. 锋利的jQuery第2版学习笔记1~3章

    第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...

  5. 锋利的jQuery第2版学习笔记6、7章

    第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...

  6. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  7. jquery无new构建学习笔记

    当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是 ...

  8. jquery类数组结构学习笔记

    大家都知道我们使用$()产生的jquery对象可以使用下标去获取对应下标的元素. 举个栗子,一个页面有5个div标签,我们使用$("div")去获取到这些元素,然后我们就可以使用$ ...

  9. ps切图 切png图片——学习笔记

    第一步:新建一个图层,点击ps左上角“文件”,然后新建即可(或crtl+alt+n) 参数自己随便填,注意背景图片选择透明即可. 第二步:打开psd文件,点击工具中的“移动工具”,之后选中上面的“自动 ...

随机推荐

  1. nodejs改变代码不需要重启的方法

    1.node 搭建本地服务器 在F:/node文件夹下新建app.js const http = require('http'); http.createServer((req, res) => ...

  2. nginx并发连接控制模块ngx_http_limit_conn_module

    模块: ngx_http_limit_conn_module 作用: 根据定义的key限制并发连接数 配置示例: http { limit_conn_zone $binary_remote_addr ...

  3. Windows下安装MySQL详细教程

    Windows下安装MySQL详细教程 1.安装包下载  2.安装教程 (1)配置环境变量 (2)生成data文件 (3)安装MySQL (4)启动服务 (5)登录MySQL (6)查询用户密码 (7 ...

  4. CentOS7搭建FastDFS V5.11分布式文件系统-第二篇

    1.CentOS7 FastDFS搭建 前面已下载好了要用到的工具集,下面就可以开始安装了: 如果安装过程中出现问题,可以下载我提供的,当前测试可以通过的工具包: 点这里点这里 1.1 安装libfa ...

  5. Linux终端复用工具 tmux

    简介 Terminal Multiplexer (From WIKIPEDIA) - A terminal multiplexer is a software application that can ...

  6. JVM调优一些相关内容

    JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...

  7. centos6.7 安装 virtualBox 再安装 centos 7

    Tag: 黄色为自己实际情况需要设置的部分,绿色部分为虚拟机名称(自定义) 1.创建虚拟机VBoxManage createvm --name centos7 --ostype Linux26_64 ...

  8. java学习-GET方式抓取网页(UrlConnection和HttpClient)

    抓取网页其实就是模拟客户端(PC端,手机端...)发送请求,获得响应数据documentation,解析对应数据的过程.---自己理解,错误请告知 一般常用请求方式有GET,POST,HEAD三种 G ...

  9. Cacheable redis 宕机

    使用Cacheable注解Redis方法时,如果Redis服务器挂了,就直接抛出异常了, java.net.ConnectException: Connection refused: connect ...

  10. .Net Core使用 MiniProfiler 进行性能分析（转）

    转自:http://www.cnblogs.com/ideacore/p/9505425.html 官方文档: https://miniprofiler.com/dotnet/AspDotNetCor ...