jquery 利用animate完成左右轮流切换图片

html部分

<div class="bag3 panel">
  <div class="bg3_content">
      <div class="bg3_img">
          <div class="first2">
              <div class="img_top">
                 <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>

              </div>
              <div class="img_middle">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>

               </div>
              <div class="img_bottom">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
          </div>
          <div class="second2">
              <div class="img_top">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>

              </div>
              <div class="img_middle">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>

              </div>
              <div class="img_bottom">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
          </div>
          </div>

      </div>
    <div class="next_left"></div>
    <div class="next_right"></div>
    <div class="next1" ><div><a>|</a></div></div>
  </div>

css部分

.bg3_content{
    height: 385px;
    width: 60%;
    position: absolute;
    left: 310px;
    bottom: 148px;
   overflow: hidden;
}

.bg3_img{
    width: 2400px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-weight:bold;">purple;

}
.first2,.second2{
     width: 900px;
    height: 100%;
   position: absolute;
}
.first2{
    position: absolute;
    top: 0px;
    left: 0px;
}
.second2{
    position: absolute;
    top: 0px;
    left: 900px;
}

  /*第四屏左右切换*/
   var num=1
  $(".next_left").click(function(){
     ///  alert(num)
         if(num==1){
             $(".second2").css("left","-900px");
             $(".first2").animate({left:"900px"},500,function () {
                 num++;

             });
            $(".second2").animate({left:"0px"},500,function () {

                 // $(".first2").css("marginLeft","900px");
             });
         } if(num==2){
          $(".first2").css("left","-900px");
           $(".second2").animate({left:"900px"},500,function () {
                num=1
              $(".second2").css("left","900px");
           });
           $(".first2").animate({left:"0px"},500,function () {


           });
       }

});
   $(".next_right").click(function(){
       ///  alert(num)
       if(num==1){
           $(".first2").animate({left:"-900px"},500,function () {
               num++;
               $(".first2").css("left","900px");
           });
           $(".second2").animate({left:"0px"},500,function () {

               // $(".first2").css("marginLeft","900px");
           });
       } if(num==2){

           $(".second2").animate({left:"-900px"},500,function () {
               num=1
               $(".second2").css("left","900px");
           });
           $(".first2").animate({left:"0px"},500,function () {


           });
       }


   });

转载于:https://www.cnblogs.com/yaomengli/p/6938476.html