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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
小程序实现上下切换位置
Nov 16 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如何使用Memcached
2016/04/05 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python下载网络小说实例代码
2018/02/03 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python super函数使用方法详解
2020/02/14 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
运动会通讯稿50字
2014/01/30 职场文书
户外婚礼策划方案
2014/02/08 职场文书
安全例会汇报材料
2014/08/23 职场文书
市场部经理岗位职责
2015/02/02 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python