效果：

思路：首先获得图片数组，然后做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. 每天进步一点点——关于SSD写入放大问题

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/29812433 1. 关于SSD的写入放大     之前在SSD(Solid State Dr ...

  2. 关于linux的进程中的各个线程cpu占用情况的分析和查看

    我们常常会在新开的服搭建一个游戏的server,有时候要进行压力測试,那么怎样来看呢,一般我们会通过top命令查看各个进程的cpu和内存占用情况,获得到了我们的进程id,然后我们或许会通过pstack ...

  3. RxJava Subject

    Subject Subject可以看成是一个桥梁或者代理,在某些ReactiveX实现中(如RxJava),它同时充当了Observer和Observable的角色.因为它是一个Observer,它可 ...

  4. [Android Pro] android root权限破解分析

    许 多机友新购来的Android机器没有破解过Root权限,无法使用一些需要高权限的软件,以及进行一些高权限的操作,其实破解手机Root权限是比较简 单及安全的,破解Root权限的原理就是在手机的/s ...

  5. matlab从文件夹名中获得该文件夹下所图像文件名

    function [s,nameC]=get_FileNameFromFolderPath(path) % 函数调用:[s,nameC]=get_FileNameFromFolderPath(path ...

  6. Spark Streaming性能调优详解（转）

    原文链接:Spark Streaming性能调优详解 Spark Streaming提供了高效便捷的流式处理模式,但是在有些场景下,使用默认的配置达不到最优,甚至无法实时处理来自外部的数据,这时候我们 ...

  7. 改善你的jQuery的25个步骤

    1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势.它节省了你服务器 ...

  8. List、Set、Map、数组之间各种转换

    刚学Java不久的时候,接到一个电面,然后问了一些java的知识,比如说Java的编码,Unicode等,但是最让我蛋疼的是怎么吗map转为set,那个时候对集合用的很少,对集合不是特别了解,map还 ...

  9. 小课堂week16 编程范式巡礼第一季 三大基石

    编程范式巡礼第一季 三大基石 最近迷上了一些哲史类书籍,回望过去.放眼未来,往往沉浸在其思维之美中无法自拔.计算机编程是一门非常年轻的学科,沉淀不足也是年轻的一个侧面,在编程领域,有足够思想深度的作品 ...

  10. Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)

    http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html 2012年4月给同学写了篇傻瓜式的 VS2010+Opencv- ...