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-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 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对文件进行加锁、解锁实例
2015/01/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
中止javascript执行的方法
2014/02/14 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
node网页分段渲染详解
2016/09/05 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python的Lambda函数用法详解
2019/09/03 Python
python中pivot()函数基础知识点
2021/01/03 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
小学音乐教学反思
2014/02/05 职场文书
颁奖晚会主持词
2014/03/25 职场文书
出生公证书样本
2014/04/04 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
在人间读书笔记
2015/06/30 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Python基本数据类型之字符串str
2021/07/21 Python
js 数组 fill() 填充方法
2021/11/02 Javascript
JavaScript实现优先级队列
2021/12/06 Javascript