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
时间： 2024-10-13 12:03:43