效果：

思路：首先获得图片数组，然后做JS定时用setTimeout和setInterval在用显示隐藏实现闪烁效果。

代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <script type="text/javascript">

         //图片数组

         var imgNumber = [];

         //20160815添加动画效果

         function Init() {

             for (var i = 1; i <= 5; i++) {

                 imgNumber[i] = "image" + i;

             }

         }

         //定时执行

         window.setTimeout(aniFun, 1000);

         //当前图片序号

         var curNumber = 0;

         var f = "";

         var showOrHide = "";

         //动画效果

         function aniFun() {

             //添加图片闪烁效果

             showOrHideImage();

             window.setTimeout(aniDo, 500);

         }

         //图片闪烁效果

         function showOrHideImage() {

             //循环执行

             window.setTimeout(hideAllImage, 100);

             window.setTimeout(showAllImage, 200);

             //循环执行

             window.setTimeout(hideAllImage, 300);

             window.setTimeout(showAllImage, 400);

         }

         //执行动画

         function aniDo() {

             hideAllImage();

             curNumber = 0;

             //循环执行，

             f = window.setInterval(showImage, 500);

         }

         //隐藏所有图片

         function hideAllImage() {

             //隐藏所有图片

             for (var i = 1; i <= 5; i++) {

                 if (typeof (document.getElementById(imgNumber[i])) != "undefined") {

                     document.getElementById(imgNumber[i]).style.display = "none";

                 }

             }

         }

         //显示所有图片

         function showAllImage() {

             //显示所有图片

             for (var i = 1; i <= 5; i++) {

                 if (typeof (document.getElementById(imgNumber[i])) != "undefined") {

                     document.getElementById(imgNumber[i]).style.display = "block";

                 }

             }

         }

         //显示逐个图片

         function showImage() {

             curNumber++;

             //显示逐个图片

             if (curNumber <= 5) {

                 if (typeof (document.getElementById(imgNumber[curNumber])) != "undefined") {

                     document.getElementById(imgNumber[curNumber]).style.display = "block";

                 }

             }

             else if (curNumber > 6) {

                 window.clearInterval(f);

                 aniFun();

             }

         }

     </script>

 </head>

 <body onload="Init();">

     <div style="margin-left: 400px; margin-top: 100px;">

     青苹果图片闪烁

         <img id="image1" style="display: block" src="Image/111.png" />

         <img id="image2" style="display: block" src="Image/222.png" />

         <img id="image3" style="display: block" src="Image/333.png" />

         <img id="image4" style="display: block" src="Image/444.png" />

         <img id="image5" style="display: block" src="Image/555.png" />

     </div>

 </body>

 </html>

Demo下载：

http://files.cnblogs.com/files/xinchun/ShowOrHide.zip

点滴积累【JS】---JS实现动画闪烁效果的更多相关文章

  1. 点滴积累【JS】---JS实现仿百度模糊搜索效果

    效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...

  2. 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计

    效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...

  3. 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

  4. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  5. 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

  6. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  7. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  8. 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)

    效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...

  9. 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

随机推荐

  1. Linux C/C++开发工具

    1. vim + ctags + taglist + cscope + cppcomplete + global 2.emacs+插件 可以查看 http://blog.163.com/yu_hong ...

  2. python笔记24-unittest单元测试之mock.patch

    前言 上一篇python笔记23-unittest单元测试之mock对mock已经有初步的认识, 本篇继续介绍mock里面另一种实现方式,patch装饰器的使用,patch() 作为函数装饰器,为您创 ...

  3. 仿LOL项目开发第四天

    ---恢复内容开始--- 仿LOL项目开发第四天 by草帽 上节讲了几乎所有的更新版本的逻辑,那么这节课我们来补充界面框架的搭建的讲解. 我们知道游戏中的每个界面都有自己的一个类型:比如登陆界面,创建 ...

  4. django.db.utils.OperationalError: (1071, 'Specified key was too long; max key length is 767 bytes')；

    在使用utf8mb4字符集的情况下,如果列存在索引,那么varchar的最大长度是191 数据库版本: 在使用utf8字符集的情况下,如果列存在索引,那么varchar的最大长度是255. 在大字段上 ...

  5. Postgresql死锁的处理

    今天遇到一个奇怪的现象,select和delete表时正常执行,但truncate和drop表时会一直运行,也不报错. 查了些资料才发现问题的原因,总结如下: "drop table &qu ...

  6. MyEclipse 如何最佳设置

    摘自: http://blog.csdn.net/lifuxiangcaohui/article/details/8513561 MyEclipse 如何最佳设置 作为企业级开发最流行的工具,用Mye ...

  7. Thinkphp学习笔记1-URL模式

    PATHINFO模式 PATHINFO模式是系统的默认URL模式,提供了最好的SEO支持,系统内部已经做了环境的兼容处理,所以能够支持大多数的主机环境.对应上面的URL模式,PATHINFO模式下面的 ...

  8. FrameWork模型中引入宏函数报错解决方法

    如下图在Framework的一个简单维度中加入宏函数 解决办法如下图 step1: step2: PS :Cognos 10.1.1中 在cognos connection中创建数据源,为什么没有od ...

  9. [React + Functional Programming ADT] Create Redux Middleware to Dispatch Actions with the Async ADT

    We would like the ability to group a series of actions to be dispatched with single dispatching func ...

  10. [小技巧] gcc attribute error 属性小试

    gcc __attribute__  里有一个属性是 error 能够用于编译时报错. 參考: https://gcc.gnu.org/onlinedocs/gcc-4.3.0/gcc/Functio ...