JQuery:多张图片的淡入淡出效果。

我们要实现一个这样子的一个动画：多张图片在相同的位置淡入淡出，实现图片的轮流展示。具体实现的思路：

使用定时器setInterval方法，setInterval(<要调用的方法>，时间延时)。根据时间延时循环地调用方法

将多个标签赋值为数组(全局变量),利用计数变量(全局),然后通过取余数调用不同的标签对象

fadeToggle(speed,callback) ，淡入淡出切换，执行效果时间为speed，当执行100%时执行callback函数

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
window.i=0;
$(document).ready(function(){window.star=[$("#div1"),$("#div2"),$("#div3")];setInterval(show1,2000);});
function show1(){i++;star[i%3].fadeToggle(1000);star[(i-1)%3].fadeToggle(1000);}
</script>
<style>
div {position: absolute;left: 30px;top: 20px;
width:80px;
height:80px;
}
</style>
</head><body><div id="div1" style="background-color:red;"></div><div id="div2" style="display:none;background-color:green;"></div><div id="div3" style="display:none;background-color:blue;"></div>
</body>
</html>

当然也可将图片路径赋值给数组，更改标签的src属性。实现图片的淡入淡出效果。思路和上述一样。本实例是三个矩形：红色矩形、绿色矩形、蓝色矩形的轮流展示.

JQuery:多张图片的淡入淡出效果。相关推荐

代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用，淡入淡出效果(用)
代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_c ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
html实现新闻滚动效果,jQuery实现新闻播报滚动及淡入淡出效果示例
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery实现新闻播报滚动及淡 ...
android淡入淡出动画循环,使用TransitionDrawable实现多张图片淡入淡出效果
欢迎界面想做出广告页自动轮播的效果,图片切换的方式用淡入淡出的方式.这个在h5页面很容易就实现了,但是在android界面中,很容易就想到了动画animation动画来实现,但是发现使用动画的话,这种 ...
jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...
004_淡入淡出效果
1. jQuery淡入淡出方法 1.1. 通过jQuery, 您可以实现元素的淡入淡出效果. 1.2. jQuery拥有下面四种fade方法: fadeIn().fadeOut().fadeToggl ...
淡入淡出效果 || 高亮显示案例
淡入淡出效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码向上滚动代码带上下翻按钮滚动特效 body{ ...

JQuery:多张图片的淡入淡出效果。

JQuery:多张图片的淡入淡出效果。相关推荐

最新文章

热门文章