使用前在文件外部要有1.jpg 2.jpg

只是简单的模仿flash图片切换，可在此基础上引申出各种不同的效果。

思路：

建立一个数组存放图片的src,然后调用setInterval周期性的调用changeImg()方法，在changeImg()方法中每次改变其图片src。

 <head>

 <meta content="text/html;charset:utf-8";>

 <script language="JavaScript">

 var curIndex=0;

 //时间间隔 单位毫秒

 var timeInterval=1000;

 var arr=new Array();

 arr[0]="1.jpg";

 arr[1]="2.jpg";

 setInterval(changeImg,timeInterval);

 function changeImg()

 {

     var obj=document.getElementById("showpic");

     if (curIndex==arr.length-1)

         curIndex=0;

     else

         curIndex+=1;

     obj.src=""+arr[curIndex];

 }

 </script>

 </head>

 <body>

 <img src="1.jpg" width="427" height="219" id="showpic" />

 </body>

JavaScript 最简单的图片切换的更多相关文章

  1. JavaScript一个简单的图片切换布局

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

  2. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  3. jquery 实现的一款超简单的图片切换功能

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  4. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  5. JS简单实现图片切换

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  7. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  8. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  9. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

随机推荐

  1. 获取View的截图-将View转换为Bitmap对象

    开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bitmap的工具类 /** * 将View转 ...

  2. MyEclipse web项目导入Eclipse，详细说明

    最近导入一个MyEclipse的项目,具体是:spring4.1的web项目,同时遇到了一些问题,总结一下. 1.进入项目目录,找到.project文件,打开.增加一个<buildCommand ...

  3. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

  4. 传统IT企业与互联网企业的一点思考

    [注意前提]应当说,比较常用的管理策略并没有界线分明的优劣之分,只有适不适合企业的经营战略,团队文化,发展状况等. 之所以有传统IT企业与互联网企业的区别,主要的原因是两者所处的市场环境与经营思路造成 ...

  5. [MySQL Reference Manual] 24 MySQL sys框架

    24 MySQL sys框架 24 MySQL sys框架 24.1 sys框架的前提条件 24.2 使用sys框架 24.3 sys框架进度报告 24.4 sys框架的对象 24.4.1所有sys下 ...

  6. 首页大图淡入淡出效果工具flexslider

    网站首页放几张高清大图轮流播放展示是目首页设计的流行做法,虽然woothemes.com已经公布了比较成熟的flexslider工具,但本着造轮子的心态,我也做了一个自己的flexslider,当然我 ...

  7. 安卓android sharepreference数据存储，保存输入框里面的数据

    Fragment 里面 使用轻量级的数据存储sharepreference ,代码思路清晰.保存输入框里面的数据,实现按钮保存. 个人项目中简单清晰代码: 赵存档 编写 ,可以参考: 类继承Fragm ...

  8. Android 复制文本内容到系统剪贴板的最简单实践

    这个例子很简单,直接上截图和代码. 布局文件activity_copy.xml代码如下: <?xml version="1.0" encoding="utf-8&q ...

  9. UVA10325 The Lottery（容斥原理）

    题意: 给n,m,和m个数(k1~km).求1~n中有多少个数不是(k1~km)中任意一数的倍数. 题解: 容斥模板题.反面考虑,a的倍数有n/a个:既是a,也是b的倍数,即lcm(a,b)的倍数有n ...

  10. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...