js图片自动切换效果处理代码


Posted in Javascript onMay 07, 2013
<script language =javascript > 
var curIndex=0; 
//时间间隔 单位毫秒 
var timeInterval=1000; 
var arr=new Array(); 
arr[0]="1.jpg"; 
arr[1]="2.jpg"; 
arr[2]="3.jpg"; 
arr[3]="4.jpg"; 
arr[4]="5.jpg"; 
arr[5]="6.jpg"; 
arr[6]="7.jpg"; 
setInterval(changeImg,timeInterval); 
function changeImg() 
{ 
var obj=document.getElementById("obj"); 
if (curIndex==arr.length-1) 
{ 
curIndex=0; 
} 
else 
{ 
curIndex+=1; 
} 
obj.src=arr[curIndex]; 
} 
</script> 
<img id=obj src ="1.jpg" border =0 />

可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)
虽然很简单,但是很实用。
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>图片自动跳转</title> 
<script language="javascript"> 
setInterval(test,1000); 
var array=new Array(); 
var index=0; 
var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg"); 
function test() 
{ var myimg=document.getElementById("imgs"); 
if(index==array.length-1) 
{ index=0; }else{ index++; } 
myimg.src=array[index]; 
} 
</script> 
</head> 
<body > 
<img id="imgs" src="image/1.jpg" /> </body> 
</html>
Javascript 相关文章推荐
jQuery之ajax删除详解
Feb 27 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
js实现旋转的星空效果
Nov 01 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
js中实现继承的五种方法
Jan 25 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 #Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 #Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
基于JavaScript 类的使用详解
May 07 #Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 #Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python GUI编程完整示例
2019/04/04 Python
python groupby 函数 as_index详解
2019/12/16 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
python的slice notation的特殊用法详解
2019/12/27 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
应届生法律求职信
2013/10/22 职场文书
实习求职信
2013/12/01 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
法律进机关实施方案
2014/03/12 职场文书
关于运动会的口号
2014/06/07 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2014年终工作总结范本
2014/12/15 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python