동적 이미지 전환 효과를 달성하기 위한 jquery CSS

이 글의 예시에서는 jquery CSS로 구현한 동적 이미지 전환 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

기본 아이디어: 표시해야 하는 사진을 저장할 배열을 정의한 다음, 사진을 클릭하면 ZoomIn 클래스를 삭제하고 fadeOutRight 클래스를 추가하여 실제 사진이 오른쪽으로 이동하며 사라지는 것을 기억하세요. 카운터에 1을 추가하세요(다음 사진 호출에 사용). 500ms 후에 사진이 삭제되면 마지막 사진인지 판단됩니다. 카운터를 0으로 설정하고 첫 번째 그림부터 시작하는 그림 코드를 삭제한 다음 새 그림 코드를 만들고 src를 다음 그림으로 설정하고 그림에 애니메이션이 적용되도록 확대/축소 애니메이션 스타일 클래스인 animation ZoomIn을 추가한 다음 p 요소 앞에 새로운 그림 코드가 추가됩니다.

첫 번째 선택은 CSS 애니메이션 파일과 jquery 라이브러리를 소개하는 것입니다

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

간단한 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>

CSS를 추가하고 프로젝트에 따라 자유롭게 조정하세요.

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

기본 CSS는 전체 페이지 위치를 지정하며 애니메이션은 위 CSS의 영향을 받지 않습니다.
애니메이션 효과를 얻기 위해 JS를 작성하세요

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

소스 코드 다운로드: 동적 이미지 전환 효과를 얻기 위한 jquery CSS 소스 코드

위는 동적 이미지 전환 효과를 얻기 위해 CSS와 결합된 jquery입니다. 공유된 코드는 매우 상세하며 코드의 기본 아이디어를 제공하므로 학습한 내용을 적용할 수 있기를 바랍니다.