轮播图左右可以看见部分的

功能：左右箭头可以翻页上一页下一页。自己还会轮播。然后你点击半个的左右两边的图片，那个图片就变大位置跑到中间。并且鼠标滑过的时候，轮播停止。

.box{position:relative;width: 100%; height: 800px;}
.box .list{width:1000px;height:450px;overflow: hidden;position:absolute;left:50%;margin-left:-500px;}

.btn{position:absolute;top:50%;margin-top:-252px;font-size: 30px;width:60px;height:100px;line-height:100px;display:inline-block;background:#333;opacity:0.5;color:#fff;font-size: 30px;}
.prev{left:0}
.next{right:0}

.box .list .list-ul li{position:absolute;}
.box .list .list-ul li img{width:800px;height:450px;float:left;}
.p1,.p2,.p3{position:absolute;transition:all 0.3s ease-out;}  //重要这里点击的时候才有位置闪现的那种特效，否则就突兀的图片变了感觉不大位置变
.p1{  transform:translate3d(0px,0,0) scale(0.81);  transform-origin:0 50%;  opacity: 0.8;  z-index: 2;  -webkit-transform:translate3d(0px,0,0) scale(0.81);  -webkit-transform-origin:0 50%; }
.p2{  transform:translate3d(100px,0,0) scale(1);  z-index: 3;  opacity: 1; -webkit-transform:translate3d(100px,0,0) scale(1); }
.p3{  transform:translate3d(449px,0,0) scale(0.81);  transform-origin:100% 50%;  opacity: 0.8;  z-index: 2; -webkit-transform:translate3d(449px,0,0) scale(0.81); }

<div class="box">
        <div class="list">
            <ul class="list-ul">
                <li class="p1"><a href="#"><img src="images/C3.png" alt=""></a></li>
                <li class="p3"><a href="#"><img src="images/C1.png" alt=""></a></li>
                <li class="p2"><a href="#"><img src="images/C2.png" alt=""></a></li>
            </ul>
        </div>
        <a href="javascript:;" class="prev btn">&lt;</a>
        <a href="javascript:;" class="next btn">&gt;</a>
</div>
 

// 上一页
  $(".prev").click(function(){
    choose("prev");
  });
// 下一页
  $(".next").bind("click",function(){
  choose("next");
  });
 
 
 
  function choose(operate){


  $(".list li").each(function(i,e){
    var num= $(this).attr("class").split("")[1]; //取出图片的编号。左移的时候，所有编号都加一。
// console.log(num)
    if(operate=="prev"){
//    if(num==3){num=1;}
//    else num=~~num+1;
               num=num==3?1:~~num+1;
      }
     else if("next"){
//  if(num==1){num=3;}
//     else num=~~num-1;
               num=num==1?3:~~num-1;
     }
//              $(this).attr("class","p"+num);
                $(this).removeClass().addClass("p"+num);
              console.log( $(this).attr("class"));
           })
  }
  //轮播
// var index=1;
       timer=setInterval(function(){  
             choose("next");
        },4000)
// 鼠标移上去清除轮播,离开时就轮播
$(".box").mouseover(function(){
            clearInterval(timer);
        })


        $(".box").mouseleave(function(){
            timer=setInterval(choose("next"),4000);
        })


// 点击左右两边的图片时/点击的图片变大 位置放在中间
       $(document).on("click",".p1",function(e){
             choose("prev");
            return false;//返回一个false值，让a标签不跳转
        });


        $(document).on("click",".p3",function(){
            choose("next");
            return false;
        });

你可以在我的资源里面下载源文件：点击打开链接