jquery+css实现动感的图片切换效果

<link rel="stylesheet" href="css/animate.min.css"/><script type="text/javascript" src="js/jquery/1.11.1/jquery.min.js"></script>

<div class="container"> <div class="center animated">  <h1>Image Animation with A Single Img, CSS3 & some jQuery</h1>  <img class="animated" src="images/island_1x.png" alt=""/>   <p>    <a target="_blank" href="#">武林网</a>,  </p> </div></div>

 .container {   width: 100vw;   height: 100vh;   background-color: #fff;   position: absolute;  }   .center {   width: 600px;   margin-left: auto;   margin-right: auto;   position: relative;   top: 50%;   transform: translateY(-50%);   text-align: center;    background-image: url(images/banana.png);   background-position: -10000px,-10000px;   background-repeat: no-repeat;  }   .center h1 {   margin: 0px;   padding: 0px;   text-align: center;   margin-bottom: 50px;   font-size: 18px;   text-transform: uppercase;  }   .center p{   padding-top:50px;   text-align: center;   color: #ccc;   font-size: 12px;   }   .center p a{   text-decoration: none;   color: inherit;  }   .center p a:hover{   color:#222;  }   .center img{   cursor: pointer;  }

 var imgs=[ //定义存放图片路径的数组   "images/island_1x.png",   "images/banana.png",   "images/rescued-illos_1x.png",   "images/rivalry_1x.png",   "images/sir_crags_a_lot_1x.png",   "images/sf-cryptids_1x.png",   "images/db_space_1x.png",   "images/xmas1_1x.png" ]; var counter =0; //图片的记数器 $(document).ready(function () {  $(".center").on("click","img",function(){ //定义.center单击图片事件   $(this).removeClass("zoomIn").addClass("fadeOutRight"); //删除单击图片的zoomIn类，添加fadeOutRight类   counter++; //记数器加1   setTimeout(function(){ //500毫秒后执行此方法    if(counter==imgs.length) counter=0; //如果到了最后一张图片则返回第一张    $(".center img").remove(); //删除图片    $("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));    //拼接成下一张图片并加上缩放动画样式类animated zoomIn,最后添加上.center p元素前    if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")    //如果下一张图片没有定义，刚为.center元素的背影图片改为下一张图片（不明白加此行代码的用意，感觉没意义。。。）   },500);  });  });