3D轮播-仿QQ音乐轮播修改

<div class="box">
                    <div class="list">
                        <ul>
                            <li class="p5">
                                <img src="images/5-1.png" alt="" />
                            </li>
                            <li class="p4">
                                <img src="images/4-1.png" alt="" />
                            </li>
                            <li class="p3">
                                <img src="images/3-1.png" alt="" />
                            </li>
                            <li class="p2">
                                <img src="images/2-1.png" alt="" />
                            </li>
                            <li class="p1">
                                <img src="images/1-1.png" alt="" />
                            </li>
                        </ul>
                    </div>
                    <a href="javascript:;" class="prev btn"><</a>
                    <a href="javascript:;" class="next btn">></a>
                </div>
            </div>

css代码

.box {
  height: 5.55rem;
  width: 100%;
  position: relative;
}
.list {
  width: 100%;
  height: 5.55rem;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -50%;
}
.list ul {
  height: 5.55rem;
}
.list li {
  width: 8.05rem;
  height: 5.55rem;
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  transition: all 0.3s ease-out;
}
.list li img {
  width: 8.05rem;
  height: 5.55rem;
  border: none;
  float: left;
}
.p1 {
  transform: translate3d(-117px, 0, 0) scale(0.81);
}
.p2 {
  transform: translate3d(30px, 0, 0) scale(0.95);
  transform-origin: 0 50%;
  opacity: 0.8;
  z-index: 2;
}
.p3 {
  transform: translate3d(117px, 0, 0) scale(1);
  z-index: 3;
  opacity: 1;
}
.p4 {
  transform: translate3d(190px, 0, 0) scale(0.95);
  transform-origin: 100% 50%;
  opacity: 0.8;
  z-index: 2;
}
.p5 {
  transform: translate3d(351px, 0, 0) scale(0.81);
}
.btn {
  position: absolute;
  top: 50%;
  margin-top: -0.416666rem;
  width:0.333333rem;
  height:0.416666rem;
  line-height: 0.416666rem;
  font-size: 0.25rem;
  color: white;
  text-decoration: none;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 10;
}
.next {
  right: 0;
}

js代码--需要先引入jq文件

//根据各自的需要注释或者取消注释使用

var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
    function(){
    nextimg();
    }
)
$(".prev").click(
    function(){
    previmg();
    }
)
//上一张
function previmg(){
    cArr.unshift(cArr[4]);
    cArr.pop();
    //i是元素的索引，从0开始
    //e为当前处理的元素
    //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
    $("li").each(function(i,e){
        $(e).removeClass().addClass(cArr[i]);
    })
    index--;
    if (index<0) {
        index=4;
    }
    show();
}

//下一张
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为p2的元素触发上一张照片的函数
//$(document).on("click",".p2",function(){
//    previmg();
//    return false;//返回一个false值，让a标签不跳转
//});

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

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

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

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

效果图