图片自动切换

最新推荐文章于 2020-11-30 05:50:59 发布

原创最新推荐文章于 2020-11-30 05:50:59 发布 · 616 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#setInterval

interview 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在面试中遇到的图片自动切换功能的实现，实际操作发现仅需几分钟即可完成。关键在于使用JavaScript的setInterval函数，该函数能够按照指定间隔不断执行代码，从而实现图片的自动切换。通过实例代码展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天面试，面试官说图片切换功能怎么做，简单的答了一下，因为没有做过，面试管问我估计多长时间能做好，我回答可能一天时间。晚上实现了一下，这个也就几分钟就搞定了，我居然答了一天。

其实主要知识点就是自动刷新：setInterval -- 间隔指定的毫秒数不停地执行指定的代码。

先上图：

下面附上代码：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>图片自动切换</title>
	</head>
	<script type="text/javascript">
  	window.onload=function(){
  		var img = document.getElementById("img");
  		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";
	    var count = 0;
	    setInterval(function(){
	   	if(count==arr.length-1){
	   		count=0;
	   	}else{
	   		count++;
	   	}
	   	img.src=arr[count];
	   },2000);
  	}
  </script>
	<body>
		<font color='red'><b>图片自动切换    -->  2014-10-9</b></font><br>
		<font color='blue'>主要应用setInterval(codes, interval);<br>
			setInterval函数参数<br>
			codes -- 代码段的字符串表示(与eval函数的参数相同)，或者是匿名函数、函数名<br>
			interval -- 间隔的毫秒数<br>
		</font>
		<hr>
		<img src="1.jpg" width="500px" height="500px" id="img">
	</body>
</html>