jquery加CSS3炫酷切割轮播图

jquery加CSS3炫酷切割轮播图
插件描述:这是一个使用css3+jQuery实现的轮播图效果

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

CSS样式:

body{background-color:#232323}
.slider-outer{width:560px;height:300px;margin:150px auto;background-color:#f60;position:relative;}
.img-item{position:absolute;width:112px;height:100%;background-color:#f10;transition:all 1.5s;transform-style:preserve-3d;/*设置子元素在3D空间中呈现*/}
.btns{position:absolute;top:50%;width:100%;height:70px;margin-top:-35px;}
.prev,.next{width:70px;height:70px;line-height:70px;text-align:center;background-color:rgba(0,0,0,.3);color:#fff;font-size:30px;cursor:pointer;position:absolute;}
.prev{left:0;}
.next{right:0;}
/*让图片可以构成一个有四个面的长方体 start*/
.img{width:100%;height:100%;position:absolute;background-size:cover;}
.img:nth-child(1){background:url(images/1.png) no-repeat;transform:rotateX(0deg) translateZ(150px);}
.img:nth-child(2){background:url(images/2.png) no-repeat;transform:rotateX(-90deg) translateZ(150px);}
.img:nth-child(3){background:url(images/3.png) no-repeat;transform:rotateX(-180deg) translateZ(150px);}
.img:nth-child(4){background:url(images/4.png) no-repeat;transform:rotateX(-270deg) translateZ(150px);}
/*让图片可以构成一个有四个面的长方体 end*/

DOM结构:

<div class="slider-outer">
  <div class="img-item">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
  <div class="img-item">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
  <div class="img-item">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
  <div class="img-item">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
  <div class="img-item">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
  <div class="btns" data-num="0">
    <div class="prev"><</div>
    <div class="next">></div>
  </div>
</div>

JavaScript调用方式:

$(function(){
  var num = 0;
  $(".slider-outer .img-item").each(function(index, el){
    $(this).css({
      "left":$(this).width() * index + "px",
      "transitionDelay": index * 0.3 + "s"  //让每个img-item延时一定时间执行动画
    });
    $(this).find(".img").css({
      "backgroundPosition": -$(this).width() * index + "px"
    });;
  });
  
  $(".prev").on("click",function(){
    $(".slider-outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");
  });
  $(".next").on("click",function(){
    $(".slider-outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
  });

  var timejg=4000;//轮播间隔时间
  var time = setInterval(move, timejg);
  function move(){
    $(".slider-outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
  }
  $('.slider-outer').hover(function(){
    clearInterval(time);
  },function(){
    time = setInterval(move, timejg);
  });
})