效果：

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

    Netty框架新版本号:3.0.2.GA,于2008年11月19日公布.Netty项目致力于提供一个异步的.事件驱动的网络应用框架和工具,用于高速开发可维护的.高性能的.高扩展性的server和cli ...

  2. Nginx发展现状及未来特性

    Nginx ("engine x")是一个高性能的HTTP和反向代理 服务器,也是一个IMAP/POP3/SMTP 代理服务器,其特点是占用内存少,并发能力强.到目前完为止,Ngi ...

  3. CSS：CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  4. Android Studio调试报错am startservice

    今天下载了一个Android studio2.3.0版本,想调试一下自己的一个项目,但是发现项目编译运行正常,但是一调试就报错: 09/14 16:19:13: Launching app$ adb ...

  5. go语言基础之函数只有一个返回值

    1.函数只有一个返回值 示例1: package main //必须有一个main包 import "fmt" func myfunc01() int { return 666 } ...

  6. leetcode笔记：First Bad Version

    一. 题目描写叙述 You are a product manager and currently leading a team to develop a new product. Unfortuna ...

  7. （转）Session URL重写

    Session URL重写 发表于 2012 年 3 月 5 日 Session URL重写,保证在客户端禁用或不支持COOKIE时,仍然可以使用Session session机制.session机制 ...

  8. SVM 总结

    SVM有一个核心函数SMO,也就是序列最小最优化算法.SMO基本是最快的二次规划优化算法,其核心就是找到最优参数α,计算超平面后进行分类.SMO方法可以将大优化问题分解为多个小优化问题求解,大大简化求 ...

  9. CentOS系统时间同步（NTP）

    CentOS系统时间同步的步骤如下: 新装的CentOS系统服务器可能设置了错误的,需要调整时区并调整时间. 如下是CentOS系统使用NTP来从一个时间服务器同步把当前时区调整为上海就是+8区,想改 ...

  10. Unity3D开发之Mac OS 开发环境搭建 笔记

    http://www.cnblogs.com/zhaoqingqing/p/3383167.html 首先上几张图: 摸索了一上午,才搞定在模拟器中运行.至于在Iphone真机中运行,虽然有开发者证书 ...