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 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
js模糊查询实例分享
Dec 26 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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 布尔值的自增与自减的实现方法
2018/05/03 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
动态表格Table类的实现
2009/08/26 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
医院院务公开实施方案
2014/05/03 职场文书
公司担保书格式范文
2014/05/12 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang