首页 > 代码库 > jQuery箭头切换图片 - 学习笔记

jQuery箭头切换图片 - 学习笔记

2024-09-26 16:43:39   234人阅读

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箭头切换图片 - 学习笔记


联系
我们