效果：

思路：首先获得图片数组，然后做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. Ext面板

    <HTML> <HEAD> <TITLE>面板</TITLE> <link rel="stylesheet" type=&qu ...

  2. HDU 3436 Queue-jumpers

    题意: n个人站成一排  一開始是从1到n有序的  如今有三个操作  Top操作是将一个人排到队首  Query操作是询问某个人如今排第几  Rank操作是询问排某个位置的人是谁 思路: 将队伍扭来扭 ...

  3. Install Tomcat 7 on CentOS, RHEL, or Fedora

    linux下的 Tomcat 安装: http://www.davidghedini.com/pg/entry/install_tomcat_7_on_centos

  4. jquery城市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. [Android Studio] Android Studio使用教程（二）

    以下是本次Google I/O大会发布的IDE Android Studio使用教程第二篇: 在Android Studio使用教程(一)中简要介绍了Android Studio的基本使用,包括安装. ...

  6. iOS开源项目：SVPullToRefresh

    SVPullToRefresh也是一个下拉刷新的项目:https://github.com/samvermette/SVPullToRefresh SVPullToRefresh 允许你通过一行代码把 ...

  7. Struts2数据验证机制

    1. 手动验证的实现 只需要在继承ActionSupport类的情况下,直接重写validate()方法即可.使用validate()方法可以对用户请求的多个Action方法进行验证,但其验证的逻辑是 ...

  8. TextView文字横向自己主动滚动

              效果截图:                              watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjI4Nj ...

  9. Linux阅读笔记(一)

    1.关机命令 shutdown -h now             马上关机 shutdown -r now              马上重新启动 reboot                   ...

  10. KineticJS教程（6）

    KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...