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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript eval函数深入认识
Feb 21 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
js+css实现select的美化效果
Mar 24 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
javascript中this的用法实践分析
Jul 29 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php二维数组排序详解
2013/11/06 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
回顾Javascript React基础
2019/06/15 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python装饰器原理与用法分析
2018/04/30 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python numpy 按行归一化的实例
2019/01/21 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
销售类个人求职信范文
2013/09/25 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
2014年防汛工作总结
2014/12/08 职场文书
班主任经验交流材料
2014/12/16 职场文书
灵山大佛导游词
2015/02/04 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书