jquery css实现动态画面切换效果

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

具体代码如下：

基本思路：定义一个数组存储要显示的图片，然后在点击图片时删除zoomIn类，添加fadeOutRight类实现真实图片向右移动消失，计数器加1(用来调用下一张图片)，判断图片删除500ms后是否是最后一张，如果是，将计数器调整为0，从第一张图片开始，删除图片代码，然后新建一张图片代码。并设置src为下一张图片，同时添加动画zoomIn使图片实现动画显示，然后在p元素前插入新的图片代码。

最好介绍CSS动画文件和jquery库。

链接rel='样式表' href=' CSS/animate . min . CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery/1 . 11 . 1/jquery . min . js '/脚本构建简单的html。

div class=' container ' div class=' center animated ' h1 image animate with A Single Img，S3一些jquery/h1 Img class=' animated ' src=' http : images/island _ 1x . png ' alt=' '/p A target=' _ blank ' href=' # ' we/A，/p /div/div加上一些CSS，请根据自己的项目进行调整。容器{宽度： 100 VW；高度： 100 VH；背景-color : # fff；绝对位置：} .中心{宽度： 600 px；左边距left: auto右边距：自动；相对位置：top : 50%；transform : translateY(-50%)；文本对齐：中心；背景-image : URL(images/banana . png)；背景-位置： -10000px，-10000 px；背景-重复：不重复；} .中心h1 { margin: 0pxpadding: 0px文本对齐：中心；边距-底部： 50px；font-size : 18px；text-transform:大写；} .中心p { padding-top :50 px；文本对齐：中心；color: # cccfont-size : 12px；} .居中p a { text-decoration : none；color:继承；} .中心p a:hover { color: # 222} .将img { cursor:指针居中；} Basic CSS定位整个页面，动画不受以上CSS影响。写JS实现动画。

Var imgs=[ //定义存储图片的数组' images/island _ 1x.png '，' images/banana.png '，' images/saved-illos _ 1x . png '，' images/raction _ 1x . png '。images/sir_crags_a_lot_1x.png '，' images/SF-crypt ds _ 1x . png '，' images/db_space_1x.png '，' images/xmas 1 _ 1x . png ']；var计数器=0；//图像计数器$(文档)。Ready (function () {$(')。中心')。On ('click '，' img '，function () {//Define。单击图片事件$ (this)的中心。removeclass(“放大”)。addclass('淡出)。//删除被点击图片的zoomIn类，增加fade OutLook类计数器；//计数器添加1settimeout (function () {//500ms)，然后在(counter==imgs)的情况下执行此方法。长度)计数器=0；//如果到达最后一张图片，则返回第一个$()。居中img’)。移除()；//删除图片$ ('img/')。attr ('src '，imgs [counter])。添加类(“动画放大”)。insertbefore ($(')。中心p’)；//马赛克进入下一张图片，添加缩放后的动画样式类animated zoomIn，最后在之前添加if。中心p元素(imgs [counter1]！=undefined) $('。中心')。CSS ('backgroundimage '，' URL(' imgs[counter 1]')')//如果下一张图片未定义，则后面的图片仅用于。中心元素改为下一张图片(我不明白添加这行代码的目的，感觉没有意义。) },500);});});源代码下载：jquery css实现动态图片切换效果的源代码。

以上是jquery结合css实现动态画面切换效果。共享代码非常详细，也提供了代码的基本思路。希望大家喜欢，能学以致用。