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编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue 子组件和父组件传值的示例
Sep 11 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入门小知识
2008/03/24 PHP
php 购物车的例子
2009/05/04 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
javascript基本算法汇总
2016/03/09 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
python实现查询IP地址所在地
2015/03/29 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
SQL Server面试题
2016/10/17 面试题
总经理助理岗位职责
2013/11/08 职场文书
委托书范文
2014/04/02 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js