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. jmeter报错

    1.检测服务性能是报超时时问题 解决:因为服务器限制只能域名访问不能用ip+端口访问,但是jmter使用的是IP+端口访问 如图: 所以需要服务器放开这个端口,改成可以使用这个IP+端口访问

  2. 如何利用反射简化Servlet操作

    如何利用反射简化Servlet操作   一.反射的实现 新建类BaseServlet,继承HttpServlet(不需要在web.xml文件中配置) 1.在doPost()方法中处理请求乱码,并调用d ...

  3. P2149 Elaxia的路线

    P2149 Elaxia的路线 题意简述: 在一个n(n<=1500)个点的无向图里找两对点之间的最短路径的最长重合部分,即在保证最短路的情况下两条路径的最长重合长度(最短路不为一) 思路: 两 ...

  4. Requests库入门实例

    爬虫入门5个实例 实例1:京东商品页面的爬取 import requests def getHTMLText(url): try: r = requests.get(url,timeout = 30) ...

  5. javascript数据结构与算法--二叉树遍历(先序)

    javascript数据结构与算法--二叉树遍历(先序) 先序遍历先访问根节点, 然后以同样方式访问左子树和右子树 代码如下: /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * ...

  6. 一元运算符 +,可用于将变量转换为数字;如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字)

    一元运算符,可用于将变量转换为数字: var y = "5"; var x = + y; console.log(typeof y);//string 类型 console.log ...

  7. postman创建mocker Server

    为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了. 届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以 ...

  8. [转] 使用 MVC 5 的 EF6 Code First 入门 系列

    译文:http://www.cnblogs.com/Bce-/category/573301.html 原文:http://www.asp.net/mvc/overview/getting-start ...

  9. PHP CURL 伪造IP和来路

    //随机IP function Rand_IP(){ $ip2id= round(rand(, ) / ); //第一种方法,直接生成 $ip3id= round(rand(, ) / ); $ip4 ...

  10. 可视化的Redis数据库管理工具redis-desktop-manager的初步使用(图文详解)

    不多说,直接上干货! 无论是Linux 还是 Windows里安装Redis, Windows里如何正确安装Redis以服务运行(博主推荐)(图文详解) Windows下如何正确下载并安装可视化的Re ...