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制作一个网页版的猜数字小游戏

    这篇文章主要为大家详细介绍了如何利用HTML+CSS+JavaScript实现一个简单的网页版的猜数字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript闭包 懂不懂由你反正我是懂了

    JavaScript闭包 懂不懂由你反正我是懂了

    如果你不能向一个六岁的孩子解释清楚,那么其实你自己根本就没弄懂。好吧,我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了
    2011-10-10
  • 跟我学习javascript的prototype,getPrototypeOf和__proto__

    跟我学习javascript的prototype,getPrototypeOf和__proto__

    跟我学习javascript的prototype,getPrototypeOf和__proto__,深入学习了三个用来访问prototype的方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript瀑布流的实现你学会了吗

    JavaScript瀑布流的实现你学会了吗

    这篇文章主要为大家详细介绍了JavaScript瀑布流的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • RxJS在TypeScript中的简单使用详解

    RxJS在TypeScript中的简单使用详解

    这篇文章主要介绍了RxJS在TypeScript中的简单使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 微信小程序登录获取不到头像和昵称的详细解决办法

    微信小程序登录获取不到头像和昵称的详细解决办法

    相信好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时却获取不到,下面这篇文章主要给大家介绍了关于微信小程序登录获取不到头像和昵称的详细解决办法,需要的朋友可以参考下
    2022-12-12
  • uniapp小程序视图容器cover-view使用详解

    uniapp小程序视图容器cover-view使用详解

    在日常开发中,使用uniapp开发项目有时会遇到需要覆盖组件的问题,但由于某些组件的渲染优先级过高,例如video,map ,在小程序中只能使用cover-view去覆盖,这篇文章主要给大家介绍了关于uniapp小程序视图容器cover-view使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • javascript代码优化的8点总结

    javascript代码优化的8点总结

    本篇文章给大家分享了关于javascript代码优化的8点总结,希望我们整理的内容能够帮助到大家。
    2018-01-01
  • JavaScript基本语法_动力节点Java学院整理

    JavaScript基本语法_动力节点Java学院整理

    这篇文章主要介绍了JavaScript基本语法,适合刚入门的同学,有兴趣的可以了解下。
    2017-06-06
  • JavaScript实现的反序列化json字符串操作示例

    JavaScript实现的反序列化json字符串操作示例

    这篇文章主要介绍了JavaScript实现的反序列化json字符串操作,结合实例形式分析了eval与JSON.parse两种反序列化json字符串的相关操作技巧,需要的朋友可以参考下
    2018-07-07

最新评论