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+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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实现WEB动态网页静态
2006/10/09 PHP
一个php作的文本留言本的例子(六)
2006/10/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
nodejs基础应用
2017/02/03 NodeJs
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Django csrf 验证问题的实现
2018/10/09 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
高三自我鉴定怎么写
2013/10/19 职场文书
上课玩手机检讨书
2014/02/08 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
Python多个MP4合成视频的实现方法
2021/07/16 Python
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
VUE递归树形实现多级列表
2022/07/15 Vue.js