js图片自动切换效果处理代码

 更新时间:2013年05月07日 17:53:46   作者:  
自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)虽然很简单,但是很实用
复制代码 代码如下:

<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>

相关文章

  • JS控制静态页面传递参数并获取参数应用

    JS控制静态页面传递参数并获取参数应用

    这篇文章主要介绍了JS控制静态页面传递参数并获取参数应用的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • js制作提示框插件

    js制作提示框插件

    这篇文章主要介绍了js制作提示框插件的方法,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下
    2020-12-12
  • 清除网页历史记录,屏蔽后退按钮!

    清除网页历史记录,屏蔽后退按钮!

    浏览器的后退按钮使得我们能够方便地返回以前访问过的页面,它无疑非常有用。但有时候我们不得不关闭这个功能,以 防止用户打乱预定的页面访问次序。
    2008-12-12
  • JavaScript淡入淡出渐变简单实例

    JavaScript淡入淡出渐变简单实例

    这篇文章主要介绍了JavaScript淡入淡出渐变实现方法,涉及javascript页面元素样式的渐变操作技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • HTML中setCapture、releaseCapture 使用方法浅析

    HTML中setCapture、releaseCapture 使用方法浅析

    本文给大家简单介绍了下html中的高级拖动技术setCapture、releaseCapture的使用方法,有需要的小伙伴可以参考下
    2016-09-09
  • 初步了解javascript面向对象

    初步了解javascript面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装、继承、多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值、对象或函数
    2015-11-11
  • JS验证日期的格式YYYY-mm-dd 具体实现

    JS验证日期的格式YYYY-mm-dd 具体实现

    这篇文章介绍了JS对日期格式的验证实例,有需要的朋友可以参考一下
    2013-06-06
  • 详解Require.js与Sea.js的区别

    详解Require.js与Sea.js的区别

    RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。这篇文章给大家简单介绍了Require.js与Sea.js的区别,感兴趣的朋友一起看看吧
    2018-08-08
  • JS字符串拼接在ie中都报错的解决方法

    JS字符串拼接在ie中都报错的解决方法

    最近用js拼接字符串时遇到问题了,不论怎么拼接在ie中都报错,于是找到了一个不错的解决方法,在此与大家分享下
    2014-03-03
  • javaScript window.event.keyCode 集合与测试方法

    javaScript window.event.keyCode 集合与测试方法

    javaScript window.event.keyCode 集合,对于事件的代码获取可以用脚本监听来实现。
    2010-05-05

最新评论