使用前在文件外部要有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. 记录一次Quartz2D学习(七)

    (六)内主要讲述了图片的裁剪 本次主要讲交互 7.交互 7.1  通过外部刷新内部的显示效果 初始化的时候设定好初始值,调用setNeedsDisplay方法来重新绘制 - (instancetype ...

  2. vim使用笔记

    vim的配置文件.vimrc  一般有2个位置 1是在/目录下 2是在-目录下 如果在-目录下有了配置文件 那么将不去读取/目录下面的配置文件 如果你不知道现在使用的vim 使用的是哪个目录下面的配置 ...

  3. MTU(Maximum transmission unit) 最大传输单元

    最大传输单元(Maximum transmission unit),以太网MTU为1500. 不同网络MTU如下: 如果最大报文数据大小(MSS)超过MTU,则会引起分片操作.   路径MTU: 网路 ...

  4. HTTP Session、Cookie机制详解

    一.什么是http session,有什么用 HTTP协议本身是无状态的,本身并不能支持服务端保存客户端的状态信息,于是,Web Server中引入了session的概念,用来保存客户端的状态信息. ...

  5. ORACLE分区表梳理系列（一）- 分区表概述、分类、使用方法及注意事项

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  6. netty学习资料

    netty学习资料推荐官方文档和<netty权威指南>和<netty in action>这两本书.下面收集下网上分享的资料 netty官方参考文档 Netty 4.x Use ...

  7. python学习笔记-import utils报错

    今天遇到一个坑爹的问题,查找了半天原因,终于解决了,在此特地记录一下. 运行环境:Windows eclipse 我在eclipse中配置了python的运行环境,在eclipse中编写python代 ...

  8. BZOJ 1565: [NOI2009]植物大战僵尸

    1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2317  Solved: 1071[Submit][Stat ...

  9. BZOJ1500[NOI2005]维修数列

    Description Input 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一 ...

  10. mongodb 速成笔记

    以下环境为mac osx + jdk 1.8 + mongodb v3.2.3 一.安装 brew安装方式是mac下最简单的方式 brew update brew install mongodb 其它 ...