jquery css pour obtenir un changement d'image dynamique effect_jquery

L'exemple de cet article décrit le code d'effet de changement d'image dynamique implémenté par jquery css. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

Idée de base : Définissez un tableau pour stocker les images qui doivent être affichées, puis supprimez la classe zoomIn lorsque l'on clique sur l'image, ajoutez la classe fadeOutRight et réalisez le image réelle se déplaçant vers la droite et disparaissant, n'oubliez pas d'ajouter 1 au compteur (utilisé pour appeler l'image suivante). Lorsque l'image est supprimée 500 millisecondes plus tard, il est jugé si l'image est la dernière. Si c'est le cas, définissez la. compteur à 0 et supprimez le code d'image à partir de la première image, puis créez un nouveau code d'image, définissez src sur l'image suivante et ajoutez la classe de style d'animation zoom zoomIn animé pour permettre à l'image d'être animée, puis insérez le nouveau code image avant l’élément p.

Le premier choix est d'introduire les fichiers d'animation CSS et la bibliothèque jquery

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

Construire du HTML simple

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

Ajoutez du CSS, n'hésitez pas à l'ajuster en fonction de votre projet

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

Le CSS de base positionne la page entière et l'animation n'est pas affectée par le CSS ci-dessus.
Écrivez du JS pour obtenir des effets d'animation

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

Téléchargement du code source : jquery css pour obtenir le code source de l'effet de commutation d'image dynamique

Ce qui précède est jquery combiné avec du css pour obtenir un effet de changement d'image dynamique. Le code partagé est très détaillé et fournit l'idée de base du code. J'espère que vous l'aimerez et pourrez appliquer ce que vous avez appris.