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 tools系列 expose 学习
Sep 06 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
JavaScript canvas绘制折线图
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
php $_ENV为空的原因分析
2009/06/01 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
js实现select下拉框选择
2020/01/11 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python中as用法实例分析
2015/04/30 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python异常处理操作实例详解
2018/05/10 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
python轮询机制控制led实例
2020/05/03 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
施工资料员岗位职责
2014/01/06 职场文书
学校安全工作制度
2014/01/19 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
村官个人总结范文
2015/03/03 职场文书
后天观后感
2015/06/08 职场文书
导游词之青岛太清宫
2019/12/13 职场文书