jquery CSS, um einen dynamischen Bildwechseleffekt zu erreichen_jquery

Das Beispiel in diesem Artikel beschreibt den von jquery css implementierten dynamischen Bildwechseleffektcode. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

Grundidee: Definieren Sie ein Array zum Speichern der Bilder, die angezeigt werden müssen, löschen Sie dann die ZoomIn-Klasse, wenn Sie auf das Bild klicken, fügen Sie die FadeOutRight-Klasse hinzu und realisieren Sie das Das echte Bild bewegt sich nach rechts und verschwindet. Denken Sie daran, 1 zum Zähler hinzuzufügen (wird verwendet, um das nächste Bild aufzurufen). Wenn das Bild 500 Millisekunden später gelöscht wird, wird beurteilt, ob es das letzte ist Setzen Sie den Zähler auf 0 und löschen Sie den Bildcode beginnend mit dem ersten Bild. Erstellen Sie dann einen neuen Bildcode, setzen Sie src auf das nächste Bild und fügen Sie die Zoom-Animationsstilklasse animiert zoomIn hinzu, damit das Bild animiert werden kann neuer Bildcode vor dem p-Element.

Die erste Wahl besteht darin, CSS-Animationsdateien und eine JQuery-Bibliothek einzuführen

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

Erstellen Sie einfaches 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>

Fügen Sie etwas CSS hinzu, passen Sie es gerne an Ihr Projekt an

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

Basis-CSS positioniert die gesamte Seite und die Animation wird durch das oben genannte CSS nicht beeinflusst.
Schreiben Sie JS, um Animationseffekte zu erzielen

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

Quellcode-Download: JQuery-CSS, um den Quellcode für einen dynamischen Bildwechseleffekt zu erzielen

Das Obige ist eine Kombination aus JQuery und CSS, um einen dynamischen Bildwechseleffekt zu erzielen. Der geteilte Code ist sehr detailliert und bietet die Grundidee des Codes. Ich hoffe, er gefällt Ihnen und Sie können das Gelernte anwenden.