• 周三. 6月 29th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

JavaScript 最简单的图片切换

admin

11月 28, 2021

使用前在文件外部要有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>

发表评论

您的电子邮箱地址不会被公开。