jQuery轮播图效果+简单动画

1.html

<div class="warp">
    <div class="box first">
      <img src="../images/bg1.jpg" class="img1" alt="">
      <img src="../images/con1.png" class="img2" alt="">
      <img src="../images/text1.png" class="img3" alt="">
    </div>
    <div class="box">
      <img src="../images/bg2.jpg" class="img1" alt="">
      <img src="../images/con2.png" class="img2" alt="">
      <img src="../images/text2.png" class="img3" alt="">
    </div>
    <div class="box">
      <img src="../images/bg3.jpg" class="img1" alt="">
      <img src="../images/con3.png" class="img2" alt="">
      <img src="../images/text3.png" class="img3" alt="">
    </div>
    <div class="box">
      <img src="../images/bg4.jpg" class="img1" alt="">
      <img src="../images/con4.png" class="img2" alt="">
      <img src="../images/text4.png" class="img3" alt="">
    </div>
    <div class="box">
      <img src="../images/bg5.jpg" class="img1" alt="">
      <img src="../images/con5.png" class="img2" alt="">
      <img src="../images/text5.png" class="img3" alt="">
    </div>
    <div class="numBox">
      <span name="0"></span>
      <span name="1"></span>
      <span name="2"></span>
      <span name="3"></span>
      <span name="4"></span>
    </div>
  </div>

2.CSS

.warp{
      cursor: pointer;
      width: 700px;
      height: 300px;
      margin: 50px auto;
      position: relative;
    }
    .box{
      width: 700px;
      height: 300px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    .first{
      display: block;
    }
    .box img{
      width: 700px;
      height: 300px;
    }
    .img2{
      position: absolute;
      top: 0;
      right: -700px;
    }
    .img3{
      position: absolute;
      top: 0;
      left: -700px;
    }
    .numBox{
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    .numBox span{
      display: block;
      float: left;
      margin-right: 3px;
      width: 5px;
      height: 5px;
      border: 2px solid #FFF;
    }
    .numBox span:first-child{
      background-color: #fff;
    }

3.js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    var num = $(".numBox").find("span").eq(0).attr("name");
    // console.log(num);
    play();
    var autoplay = setInterval(() => {
      num++;
      play();
      if(num>=4){
        num = -1;
      }
    }, 2000);

    $(".warp").hover(function(){
      clearInterval(autoplay);
    },function(){
      autoplay = setInterval(() => {
      num++;
      play();
      if(num>=4){
        num = -1;
      }
    }, 2500);
    });
    
    function play(){
      // console.log(num);
      $(".numBox").find("span").css("backgroundColor","transparent");
      $(".box").hide();
      $(".img2").stop(true,true).animate({
        right:-700
      });
      $(".img3").stop(true,true).animate({
        left:-700
      });
      $(".numBox").find("span").eq(num).css("backgroundColor","#fff");
      $(".box").eq(num).find(".img2").stop(true,true).animate({
        right:0
      });
      $(".box").eq(num).find(".img3").stop(true,true).animate({
        left:0
      });
      $(".box").eq(num).show();
    }
  </script>

4.效果

效果介绍：
底层图片出现同时顶层图片一个从左往右进入，一个从右往左进入。