实现轮播效果

html    图片最少4张

<!--轮播图 start-->
        <div class="showList">
           <div class="sl-con">
               <ul>
                   <li class="p4">
                       <img src="./img/sl2.png">
                   </li>
                   <li class="p3">
                       <img src="./img/sl1.png">
                   </li>
                   <li class="p2">
                       <img src="./img/sl2.png">
                   </li>
                   <li class="p1">
                       <img src="./img/sl3.png">
                   </li>
               </ul>
           </div>
            <a href="javascript:;" class="prev btn"><i></i></a>
            <a href="javascript:;" class="next btn"><i></i></a>
        </div>
        <!--轮播图 end-->z

 每个li要设置不同的class为p，样式就是通过p来设置的

js代码

//最少要四张图
//保存图片列表的className,通过className来给图片赋值相应的css

var cArr=[]
var liList=$(".sl-con ul li") //图片列表
liList.each(function () {
    cArr.push($(this).attr("class"))
})
var listLastIndex=cArr.length-1  //获取列表的最大index值
var index=0;
$(".next").click(
    function(){
        nextimg();
    }
)
$(".prev").click(
    function(){
        previmg();
    }
)
//上一张
function previmg(){
    cArr.unshift(cArr[listLastIndex]);
    cArr.pop();
    //i是元素的索引，从0开始
    //e为当前处理的元素
    //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
    $(".sl-con ul li").each(function(i,e){
        $(e).removeClass().addClass(cArr[i]);
    })
    index--;
    if (index<0) {
        index=listLastIndex;
    }
}

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

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

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


 //            进入页面自动开始定时器
 var timer=setInterval(nextimg,4000);
 //            鼠标移入showList时清除定时器
 $(".showList").mouseover(function(){
     clearInterval(timer);
})

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

css代码

/*轮播图 start*/
.showList{
     1200px;
    height: 550px;
    margin: 0 auto;
    position: relative;
}
.sl-con{
     1124px;
    height: 350px;
    overflow: hidden;
    position: absolute;
    margin-left: 38px;
    margin-top: 100px;
}

.sl-con ul li{
    position: absolute;
    top: 66px;
    left: 0;
    list-style: none;
    opacity: 0;
    transition: all 0.3s ease-out;
    border: 1px solid #f44848;
}
.sl-con ul li img{
     272px;
    height: 180px;
    border:none;
    float: left;
    padding: 20px;
}

.p1{
    transform:translate3d(0px,0,0) scale(1);
    transform-origin:0 50%;
    opacity: 0.8 !important;
    z-index: 2;
}
/*translate3d X值为li图片的宽（312）*1.3（(1.6-1)/2+1）  405*/
.p2{
    transform:translate3d(405px,0,0) scale(1.6);
    z-index: 3;
    opacity: 1 !important;
    background-color: #f44848;
    border: none !important;
}
/*translate3d X值为li图片的宽（312）*2.6（(1.6+1）  810*/
/*有1px的误差，自己调整*/
.p3{
    transform:translate3d(810px,0,0) scale(1);
    transform-origin:100% 50%;
    opacity: 0.8 !important;
    z-index: 2;
}
.btn{
     30px;
    height: 30px;
    display: block;
    background-color: #f44848;
    position: absolute;
    top: 260px;
    cursor: pointer;
}
.prev i{
    display: block;
     0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 14px solid #ffffff;
    border-bottom: 7px solid transparent;
    margin: 8px 8px;
}
.next{
    right: 0;
}
.next i{
    display: block;
     0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 14px solid #ffffff;
    border-bottom: 7px solid transparent;
    margin: 8px 8px;
}


/*轮播图  end*/

注意一定要设置 p1 p2 p3的样式