手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js图片自动切换效果处理代码
js图片自动切换效果处理代码
摘要:复制代码代码如下:varcurIndex=0;//时间间隔单位毫秒vartimeInterval=1000;vararr=newArray(...

复制代码 代码如下:

<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实现精美的图片跟随鼠标效果实例

网站上面有这种切换效果

会自动逐行上升的文本框

自动检查并替换文本框内的字符

jQuery实现的多屏图像图层切换效果实例

jquery实现图片左右切换的方法

JS+DIV实现鼠标划过切换层效果的方法

免费空间广告万能消除代码

滚动效果

网页里控制图片大小的相关代码

精品推荐
分类导航