效果：

思路：首先获得图片数组，然后做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. PHP：相对于C#，PHP中的个性化语法

    背景 今天把PHP的基本语法结构熟悉了一下,包括:变量.类型.常量.运算符.字符串.作用域和函数等,本文列举一些我需要强化记忆的结构(和C#不同). 一些个性化的结构 foreach结构 <?p ...

  2. Static Nested Class 和 Inner Class的不同?

    Nested Class (一般是C++的说法),Inner Class (一般是JAVA的说法).Java内部类与C++嵌套类最大的不同就在于是否有指向外部的引用上. 注: 静态内部类(Inner ...

  3. Java 反照机制中 getMethod()和getDeclaredField()区别

    Java 反射机制中 getMethod()和getDeclaredField()区别 今天在程序中用到java反射机制时,遇到的问题记录一下:我当时遇到的问题是,我用反射getMethod()调用类 ...

  4. Table里td中的文本过长，设置不换行，随内容同行显示(转载)

    当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap   就可以解决排版问题啦 <td style="white ...

  5. iOS: 字体样式

    获取iOS内置所有的字体如下: NSArray *familyNames = [UIFont familyNames]; for( NSString *familyName in familyName ...

  6. 使用mocha测试

    学习了MOCHA官网的示例,将学习成果记录一下.[原文+例子:使用mocha测试] mocha是什么 Mocha是一个跑在node和浏览器上的javascript测试框架,让异步测试变得简单有趣, 并 ...

  7. 最佳实践扩展Windows窗体DataGridView控件 .net 4.5 附示例代码

    Windows窗体DataGridView控件的性能调优.net 4.5   在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你可以避 ...

  8. Linux shell 提取文件名和目录名

    ${}用于字符串的读取,提取和替换功能,可以使用${} 提取字符串 1.提取文件名 [root@localhost log]# var=/dir1/dir2/file.txt [root@localh ...

  9. 使用Jmeter对应用程序进行测试

    JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现,最新的版本是1.9.1,大家可以到 http://jakarta.apache.org/jmeter ...

  10. 使用select处理任意数目个客户的单进程程序

    改写http://www.cnblogs.com/nufangrensheng/p/3587962.html中的TCP回射服务器程序,把它重写成使用select来处理任意数目个客户的单进程程序,而不是 ...