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的执行速度
Jan 23 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
JavaScript实现通讯录功能
Dec 27 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
一个显示天气预报的程序
2006/10/09 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
react-router实现按需加载
2017/05/09 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python中的sort方法使用详解
2014/07/25 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
pandas删除指定行详解
2019/04/04 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
物流合作计划书
2014/01/10 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
海洋天堂观后感
2015/06/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书