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

最新推荐文章于 2024-03-21 19:52:25 发布

superSmart_Dong

最新推荐文章于 2024-03-21 19:52:25 发布

阅读量2.5k

点赞数 1

分类专栏： Javascript 文章标签： jquery 淡入淡出 javascript 动画

原创，想转就转

本文链接：https://blog.csdn.net/superSmart_Dong/article/details/73616483

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

使用定时器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属性。实现图片的淡入淡出效果。思路和上述一样。本实例是三个矩形：红色矩形、绿色矩形、蓝色矩形的轮流展示.

superSmart_Dong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery:多张图片的淡入淡出效果。

我们要实现一个这样子的一个动画：多张图片在相同的位置淡入淡出，实现图片的轮流展示。具体实现的思路：使用定时器setInterval方法，setInterval(，时间延时)。根据时间延时循环地调用方法将多个标签赋值为数组(全局变量),利用计数变量(全局),然后通过取余数调用不同的标签对象fadeToggle(speed,callback) ，淡入淡出切换，执行效果时间为speed
复制链接

扫一扫