使用前在文件外部要有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. 后记：IT软件人员学习的书籍 - IT软件人员书籍系列文章

    1年了,软件人员学习书籍系列总算是写完了.虽然文字篇幅不多,主要对各个角色的一些基本内容做了介绍,但是更重要的是能够提供相关的人员学习书籍进行下载,让更多的人能够从中学习到更多的知识. 这个系列,从项 ...

  2. SQL优化技术分析-1：操作符优化

    1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL 性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用IN的SQL有 ...

  3. favicon.ico 404

    favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...

  4. $(window).height(),在火狐下面获取的高度并不是可视区域的高度

    很简单,我发现是没有写<!DOCTYPE html>造成的,加上去就可以了

  5. Windows Installer 服务启动错误 14007 的解决办法

    问题: 在 本地计算机 无法启动 Windows Installer 服务. 错误代码 14007: 在活动的激活上下文中没有找到任何查找密钥. 这个问题似乎涉及到 Windows Installer ...

  6. POJ 2398 Toy Storage(计算几何)

    题意:给定一个如上的长方形箱子,中间有n条线段,将其分为n+1个区域,给定m个玩具的坐标,统计每个区域中的玩具个数. 题解:通过斜率判断一个点是否在两条线段之间. /** 通过斜率比较点是否在两线段之 ...

  7. 第9章 Shell基础（2）_Bash基本功能

    3. Bash的基本功能 3.1 历史命令与命令补全 (1)历史命令:#history [选项] [历史命令保存文件] ①选项:-c:清空历史命令: -w:把缓存中的历史命令写入文件~/.bash_h ...

  8. webform Repeater重复器、地址栏传值、Response

    Repeater: 重复器 <HeaderTemplate></HeaderTemplate> - 头模板:在循环开始时,其内容只会打印一遍 <ItemTemplate& ...

  9. swift 简介和常量与变量 --- swift 入门

    一.思维导图 二. 代码 //创建UIView 和按钮 let views = UIView(frame: CGRect(x:20, y: 20, width: 100, height: 100))/ ...

  10. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...