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


Posted in Javascript onNovember 25, 2015

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

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="#">三水点靠木</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实现动感的图片切换效果,分享的代码很详细,还提供了代码的基本思路,希望大家喜欢,并且可以学以致用。

Javascript 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
Javascript的一种模块模式
Mar 22 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 #Javascript
You might like
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
javascript add event remove event
2008/04/07 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python:slice与indices的用法
2019/11/25 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
体育系毕业生求职自荐信
2014/04/16 职场文书
房地产推广策划方案
2014/05/19 职场文书
质量安全标语
2014/06/07 职场文书
学校消防安全责任书
2014/07/23 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
用Python爬取某乎手机APP数据
2021/06/15 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript