jquery css to achieve dynamic image switching effect_jquery

The example in this article describes the dynamic image switching effect code implemented by jquery css. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

Basic idea: Define an array to store the pictures that need to be displayed, then delete the zoomIn class when the picture is clicked, add the fadeOutRight class, and realize the real picture moving to the right and disappearing, remember Add 1 to the counter (used to call the next picture). When the picture is deleted 500 milliseconds later, it is judged whether the picture is the last one. If it is, set the counter to 0 and delete the picture code starting from the first picture. , then create a new picture code, set src to the next picture, and add the zoom animation style class animated zoomIn to allow the picture to be animated, and then insert the new picture code before the p element.

The first choice is to introduce CSS animation files and jquery library

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

Build simple html

<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>

Add some CSS, feel free to adjust it according to your project

 .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;
  }

Basic CSS positions the entire page, and the animation is not affected by the above CSS.
Write JS to achieve animation effects

 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);
  });
 
 });

Source code download: jquery css to achieve dynamic image switching effect source code

The above is jquery combined with css to achieve a dynamic image switching effect. The code shared is very detailed and provides the basic idea of ​​the code. I hope you like it and can apply what you have learned.