标签：切换 索引 flow absolute ott exti transform addclass ext
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
标签：切换 索引 flow absolute ott exti transform addclass ext
原文地址：http://www.cnblogs.com/weiaixiaomianbao/p/6914167.html
