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 相关文章推荐
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
js中this的用法实例分析
Jan 10 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JavaScript实现简单的计算器
Jan 16 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
python实现简单ftp客户端的方法
2015/06/28 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python协程之动态添加任务的方法
2019/02/19 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
四川成都导游欢迎词
2014/01/18 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
趣味运动会加油词
2015/07/18 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android