JavaScript 最简单的图片切换

转载于 2016-12-26 18:50:00 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/A--Q/p/6223399.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的网页图片自动切换示例，通过JavaScript实现图片数组的周期性切换展示，适用于初学者了解基本的网页交互技术。

使用前在文件外部要有1.jpg 2.jpg

只是简单的模仿flash图片切换，可在此基础上引申出各种不同的效果。

思路：

建立一个数组存放图片的src,然后调用setInterval周期性的调用changeImg()方法，在changeImg()方法中每次改变其图片src。

 1 <head>
 2 <meta content="text/html;charset:utf-8";>
 3 <script language="JavaScript">
 4 var curIndex=0; 
 5 //时间间隔 单位毫秒 
 6 var timeInterval=1000; 
 7 var arr=new Array(); 
 8 arr[0]="1.jpg"; 
 9 arr[1]="2.jpg"; 
10 setInterval(changeImg,timeInterval); 
11 function changeImg() 
12 { 
13     var obj=document.getElementById("showpic"); 
14     if (curIndex==arr.length-1) 
15         curIndex=0; 
16     else 
17         curIndex+=1; 
18     obj.src=""+arr[curIndex]; 
19 } 
20 </script>
21 
22 </head>
23 <body>
24 <img src="1.jpg" width="427" height="219" id="showpic" />
25 </body>