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

前端技术 2023/09/07 JavaScript

本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右移并消失，记数器加1（用于调用下一张图片），当图片删除500毫秒后判断图片是不是最后一张，如果是，就把记数器调为0，从第一张图片开始，删除图片代码，接着创建一张新的图片代码，并把src设为下一张图片，同时加上缩放动画样式类animated 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=\"#\">phpstudy</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实现动感的图片切换效果源码

以上就是jquery结合css实现动感的图片切换效果，分享的代码很详细，还提供了代码的基本思路，希望大家喜欢，并且可以学以致用。

本文地址：https://www.stayed.cn/item/19398

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案