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 部分

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jQuery箭头按钮切换图片</title>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

</head>

<body>

<div class="box">

    <div class="list">

        <ul>

            <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>

            <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>

            <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>

            <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>

            <li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>

            <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>

            <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>

        </ul>

    </div>

    <a href="javascript:;" class="prev btn"><</a>

    <a href="javascript:;" class="next btn">></a>

</div>

</body>

</html>

CSS 部分

<style type="text/css">

*{

    margin: 0;

    padding: 0;

}

.box{

    margin-top: 80px;

    width: 100%;

    height: 340px;

    position: relative; /* 相对定位 */

}

.list{

    width: 1200px;

    height: 300px;

    overflow: hidden;

    position: absolute;

    left: 50%;

    margin-left: -600px;

}

.btn{

    position: absolute; /* 绝对定位 */

    top: 50%;

    margin-top: -50px;

    width: 60px;

    height: 100px;

    line-height: 100px; /* 行高 */

    font-size: 30px;

    color: white;

    text-decoration: none; /* 文本修饰 */

    text-align: center;

    background: rgba(0,255,0,.5);

    cursor: pointer; /* 光标的样式 改为手指 */

}

.next{

    right: 0;

}

li{

    position: absolute;

    top: 0;

    left: 0;

    list-style: none;

    opacity: 0;

    transition: all 0.3s ease-out;

}

img{

    width: 751px;

    height: 300px;

    border:none;

    float: left;

}

.p1{

    transform:translate3d(-224px,0,0) scale(0.81);

    /* 3d位移 x,y,z

       x 代表横向坐标移向量的长度

       y 代表纵向坐标移向量的长度

       z 代表Z轴移向量的长度 取值不可为百分比

     */

}

.p2{

    transform:translate3d(0px,0,0) scale(0.81);

    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%;        如果只取一个值，表示垂直方向值不变。

      */

    opacity: 0.8;

    z-index: 2;

}

.p3{

    transform:translate3d(224px,0,0) scale(1);

    z-index: 3;

    opacity: 1;

}

.p4{

    transform:translate3d(449px,0,0) scale(0.81);

    transform-origin:100% 50%;

    opacity: 0.8;

    z-index: 2;

}

.p5{

    transform:translate3d(672px,0,0) scale(0.81);

}

.p6{

    transform:translate3d(896px,0,0) scale(0.81);

}

.p7{

    transform:translate3d(1120px,0,0) scale(0.81);

}

</style>

JavaScript 部分

<script type="text/jscript">

var cArr=["p7","p6","p5","p4","p3","p2","p1"];

var index=0;

$(".next").click( //下一张

    function(){

    nextimg();

    }

)

$(".prev").click( //上一张

    function(){

    previmg();

    }

)

//上一张

function previmg(){

    cArr.unshift(cArr[6]); //向数组的开头添加一个或更多元素 并返回新的长度

    cArr.pop(); //移除最后一个元素

    //i是元素的索引，从0开始

    //e为当前处理的元素

    //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class

    $("li").each(function(i,e){

        $(e).removeClass().addClass(cArr[i]);

    })

    index--;

    if (index<0) {

        index=6;

    }

    show();

}

//下一张

function nextimg(){

    cArr.push(cArr[0]); //向数组的末尾添加一个或更多元素 并返回新的长度

    cArr.shift(); //删除元素数组中的第一个值 并返回

    $("li").each(function(i,e){

        $(e).removeClass().addClass(cArr[i]);

    })

    index++;

    if (index>6) {

        index=0;

    }

    show();

}

</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. DCL，即Double Check Lock，中卫双重检查锁定。

    DCL,即Double Check Lock,中卫双重检查锁定. [Java并发编程]之十六:深入Java内存模型——happen-before规则及其对DCL的分析(含代码) 关于单例.关于DCL: ...

  2. Android studio 安装的安装若干问题

    1.在国内如何更新android sdk? 由于众所周知的某些原因,我们无法直接连接android sdk的更新服务更新sdk,所以可以通过国内的ftp站点把常用的sdk组件如android plat ...

  3. 在vue-cli建的vue项目中使用sass

    前面已使用vue-cli新建了一个vue项目,参考  使用命令行创建一个vue项目的全部命令及结果 首先看下新建项目的页面和代码,有部分修改,可忽视,如下图:     然后我们在页面添加sass的代码 ...

  4. 【learning】微信跳一跳辅助c++详解 轻松上万 【下】

    如果你还没有看完本blog的上篇,建议您先看完上篇!! 第一代辅助如何死的? 我们先来看四张图      如上方最左图所示,前面是一个小圆柱子,看起来很人畜无害似不似?? 由于上一步跳出了偏差,并没有 ...

  5. C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇)

    C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇) 名词解释:apxs apxs is a tool for building and installi ...

  6. (转)python 判断数据类型

    原文:https://blog.csdn.net/mydriverc2/article/details/78687269 Python 判断数据类型有type和isinstance 基本区别在于: t ...

  7. 编译vs下可调试的ffmpeg和x264

    以前随手记的笔记,翻出来,整理下哈 ffmpeg 在windows上的编译还是比较麻烦的,而且如果mingw-gcc编译的话,是无法在vs下调试的 所以以前刚开始玩ffmpeg的时候,费了一些功夫,用 ...

  8. Javac语法糖之增强for循环

    加强的for循环有两种,遍历数组和实现了Iterable接口的容器.javac通过visitForeachLoop()方法来实现解语法糖,代码如下: /** Translate away the fo ...

  9. cmake:用add_subdirectory()添加外部项目文件夹

    一般情况下,我们的项目各个子项目都在一个总的项目根目录下,但有的时候,我们需要使用外部的文件夹,怎么办呢? add_subdirectory命令,可以将指定的文件夹加到build任务列表中.下面是将与 ...

  10. 01-python基础

    前几天, 觉得python简单的不行, 没有仔细做笔记, 然后今天翻了下前几天看的东西, 还是记下来吧 对于python2.7 和 python3 , 建议使用python3 的模式编程, 然后使用p ...