具体代码如下：
基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右移并消失，记数器加1（用于调用下一张图片），当图片删除500毫秒后判断图片是不是最后一张，如果是，就把记数器调为0，从第一张图片开始，删除图片代码，接着创建一张新的图片代码，并把src设为下一张图片，同时加上缩放动画样式类animated zoomIn，让图片实现动画显示，之后把新建的图片代码插上p元素之前。
首选引入CSS动画文件与jquery库
再加上一些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实现动画效要
源码下载：jquery+css实现动感的图片切换效果源码
下载本文