我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示。具体实现的思路:
使用定时器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属性。实现图片的淡入淡出效果。思路和上述一样。本实例是三个矩形:红色矩形、绿色矩形、蓝色矩形的轮流展示.