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 相关文章推荐
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
js 匿名调用实现代码
2009/06/19 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
如何手工释放资源
2013/12/15 面试题
大学生村官承诺书
2014/03/28 职场文书
授权委托书协议书
2014/10/16 职场文书
实习单位指导教师评语
2014/12/30 职场文书
建议书范文
2015/02/05 职场文书
生产设备维护保养制度
2015/08/06 职场文书