jquery js 层叠轮播图（支持移动端滑动切换，支持上一张下一张，支持点击下方button触发）

呃顺哇

于 2022-12-15 14:44:12 发布

阅读量665

点赞数

分类专栏： WEB 文章标签： javascript jquery css

本文链接：https://blog.csdn.net/on_zhangjun/article/details/128329854

版权

WEB 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接上代码，没明白的私信

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>testtestset</title>
</head>
<style type="text/css">
*{
   margin: 0;
   padding: 0;
}

.box{
   margin-top: 80px;
   margin-left: 16px;
   width: 343px;
   height: 253px;
   background: #FFFFFF;
   border-radius: 12px;
   position: relative;
}

.list{
   width: 323px;
   height: 300px;
   overflow: hidden;
   position: absolute;
   margin-left: 10px;
}

.btn{
   position: absolute;
   top: 70%;
   width: 50px;
   height: 50px;
   line-height: 50px;
   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.2s linear;
   margin-left: 95px;
}
img{
   width: 134px;
   height: 180px;
   border:none;
   float: left;
}
.p1{
   transform:translate3d(-95px,0,0) scale(0.68);
   transform-origin:0 50%;
   opacity: 1;
   z-index: 2;
}
.p2{
   transform:translate3d(-65px,0,0) scale(0.82);
   transform-origin:0 50%;
   opacity: 1;
   z-index: 3;
}
.p3{
   transform:translate3d(0px,0,0) scale(1);
   z-index: 4;
   opacity: 1;
}
.p4{
   transform:translate3d(90px,0,0) scale(0.82);
   transform-origin:0 50%;
   opacity: 1;
   z-index: 3;
}
.p5{
   transform:translate3d(136px,0,0) scale(0.68);
   transform-origin:0 50%;
   opacity: 1;
   z-index: 2;
}

.buttons{
   position: absolute;
   width: 1200px;
   height: 30px;
   bottom: 0;
   left: 50%;
   margin-left: -600px;
   text-align: center;
   padding-top: 10px;
}
.buttons a{
   display: inline-block;
   width: 35px;
   height: 5px;
   padding-top: 4px;
   cursor: pointer;
}
span{
   display: block;
   width: 35px;
   height: 1px;
   background: red;
}
.blue{
   background: blue;
}
</style>

</head>
<body style="background:gray;">
   <div class="box">
       <div class="list">
           <ul>
               <li class="p5"><a href="#"><img src="img/1.png" alt="" /></a></li>
               <li class="p4"><a href="#"><img src="img/2.png" alt="" /></a></li>
               <li class="p3"><a href="#"><img src="img/3.png" alt="" /></a></li>
               <li class="p2"><a href="#"><img src="img/4.png" alt="" /></a></li>
               <li class="p1"><a href="#"><img src="img/5.png" alt="" /></a></li>
           </ul>
       </div>

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

   //下一张
   function nextimg(){
       cArr.push(cArr[0]);
       cArr.shift();
       $("li").each(function(i,e){
           $(e).removeClass().addClass(cArr[i]);
       })
       index++;
       if (index>4) {
           index=0;
       }
       show();
   }

   //通过底下按钮点击切换
   $a.each(function(){
       $(this).click(function(){
           var myindex=$(this).index();
           var b=myindex-index;
           if(b==0){
               return;
           }
           else if(b>0) {
               /*
               * splice(0,b)的意思是从索引0开始,取出数量为b的数组
               * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
               * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
               * 这时候原本的数组也将这部分数组进行移除了
               * 再把移除的数组添加的原本的数组的后面
               */
               var newarr=cArr.splice(0,b);
               cArr=$.merge(cArr,newarr);
               $("li").each(function(i,e){
               $(e).removeClass().addClass(cArr[i]);
               })
               index=myindex;
               show();
           }
           else if(b<0){
               /*
               * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
               * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
               * 也就是从原本的照片到需要点击的照片的数组
               * 然后将原本的数组跟取出的数组进行拼接
               * 再次倒序,使原本的倒序变为正序
               */
               cArr.reverse();
               var oldarr=cArr.splice(0,-b)
               cArr=$.merge(cArr,oldarr);
               cArr.reverse();
               $("li").each(function(i,e){
               $(e).removeClass().addClass(cArr[i]);
               })
               index=myindex;
               show();
           }
       })
   })

   //改变底下按钮的背景色
   function show(){
       $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
   }

   //点击class为p1的元素触发上一张照片的函数
   $(document).on("click",".p1",function(){
       previmg();
       setTimeout(function(){
           previmg();
       }, 1000);

       return false;//返回一个false值，让a标签不跳转
   });

   //点击class为p2的元素触发上一张照片的函数
   $(document).on("click",".p2",function(){
       previmg();
       return false;//返回一个false值，让a标签不跳转
   });

   //点击class为p4的元素触发下一张照片的函数
   $(document).on("click",".p4",function(){
       nextimg();
       return false;
   });

       //点击class为p5的元素触发下一张照片的函数
   $(document).on("click",".p5",function(){
       nextimg();
       setTimeout(function(){
           nextimg();
       }, 1000);
       return false;
   });

   //           鼠标移入box时清除定时器
   // $(".box").mouseover(function(){
   //    clearInterval(timer);
   // })

   //           鼠标移出box时开始定时器
   // $(".box").mouseleave(function(){
   //    timer=setInterval(nextimg,4000);
   // })

// 进入页面自动开始定时器
// timer=setInterval(nextimg,4000);

$(".list").on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".list").on("touchend", function (e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;

if (Math.abs(X) > Math.abs(Y) && X > 0) {
nextimg();
}
else if (Math.abs(X) > Math.abs(Y) && X < 0) {
previmg();
}
else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
// alert("向下滑动");
}
else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
// alert("向上滑动");
}
else {
// alert("just touch");
}
});