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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
js实现漫天星星效果
Jan 19 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信小程序入门之指南针
Oct 22 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的单引号和双引号 字符串效率
2009/05/27 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
JSON 数据格式详解
2017/09/13 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
浪漫婚礼主持词
2014/03/14 职场文书
文明寝室申报材料
2014/05/12 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
护理见习报告范文
2014/11/03 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
python实现Nao机器人的单目测距
2021/09/04 Python