使用前在文件外部要有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. SQL Server 2012 新特性：包含数据库访问数据库引擎

    简单的说就是可以让包含用户访问其他数据库,那么来看看如何配置,并且验证一下:   USE test CREATE USER up1 WITH PASSWORD = 'zhuzhu' SELECT *  ...

  2. 你该知道的-SQL里的这些新语法-函数

    前言 最近帮客户做数据库优化的时候发现客户系统使用了很多函数,自己竟然不知道是干啥的,好歹做过好几年开发的我必然不能忍!于是翻了翻资料自己学习了一下随便也分享给群友. 巧用函数的霸气作用———我做开发 ...

  3. 在DBeaver中phoenix查询报错：org.apache.phoenix.exception.PhoenixIOException: The system cannot find the path specified

    环境:Phoenix:4.4,win7系统 问题:Phoenix在查询hbase时,报"系统找不到指定路径". 解决: 请参见 https://distcp.quora.com/C ...

  4. 前端HTML之页面结构

    前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业. 废话不多讲,这一年 ...

  5. 查找素数Eratosthenes筛法的mpi程序

    思路: 只保留奇数 (1)由输入的整数n确定存储奇数(不包括1)的数组大小: n=(n%2==0)?(n/2-1):((n-1)/2);//n为存储奇数的数组大小,不包括基数1 (2)由数组大小n.进 ...

  6. 5-3 bash脚本编程之二 条件判断

    1. 条件测试的表达式 1. [ expression ]  :注意这个中括号的前后都有一个空格 2. [[ expression ]] 3. test expression 2.条件判断的类型 1. ...

  7. 如何打开、关闭IIS服务器

    问题描述:如题. 使用工具:腾讯云Windows Server 2012 R2 数据中心版 64位中文版. 操作步骤: 1.服务器管理器->IIS

  8. pitch yaw roll是什么

    虚拟现实 三维空间的右手笛卡尔坐标如图1所示. 图1 在航空中,pitch, yaw, roll如图2所示. pitch是围绕X轴旋转,也叫做俯仰角,如图3所示. yaw是围绕Y轴旋转,也叫偏航角,如 ...

  9. chrome浏览器 开发者工具简介

    Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀. 掌握了Chrome工具可提高学习效率和开发效率. 有如下功能面板,可以使用Ctrl+[和Ctrl+] ...

  10. Unity性能优化（3）-官方教程Optimizing garbage collection in Unity games翻译

    本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...