//请自带需要的图片，可将代码中的图片数量的大小调整
//系统可自动点名，返回出对应的照片和文字
<!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>
<title></title>
<style type="text/css">
img
{
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
//script标签中的函数必须显式调用才能执行,函数外部的代码在页面加载的时候就会执行
/*alert('dd');
function f1() {
alert('cc');
}
//调用函数f1，就是让函数f1的{}中的代码执行
f1();*/
var count = 1;
var isstop = false;
function changeimg() {
var s = number(1, 8);
document.getElementById('img1').src = 'images/' + s + '.jpg';
document.getElementById('ge').innerHTML = s;
}
//浏览器帮我我们开启了一个线程，在这个线程中每隔300毫秒，执行一次changeimg函数，但是一旦开启了线程，我们就要能够停止线程，否则线程一直无休止的执行下去，会占用内存资源。这个变量o的值(比如8193)就是浏览器给这个线程分配的唯一ID，如果想停止这个线程，就可以使用js中的clearInterval方法
var o = setInterval(changeimg, 300);
//alert(o);
function startorstop() {
switch (isstop) {
case false:
//停止图片循环，将按钮的文本更为为"开始"，将isstop的值改为true
clearInterval(o);
document.getElementById('btn').value = '开始';
document.getElementById('img1').src = 'images/1.jpg';
isstop = true;
break;
case true:
//开始图片循环，将按钮的文本更改为"停止",将isstop的值改为false
o = setInterval(changeimg, 300);
document.getElementById('btn').value = '停止';
isstop = false;
break;
}
//将线程的id号作为参数传入clearInterval方法，浏览器就会帮助我们停止刚刚创建的线程，所以图片就会停止轮换
}
function number(min,max) {
range = max - min;
sum = Math.random();
num = Math.round(sum * range);
return num;
}
</script>
</head>
<body>
<img src="images/1.jpg" id="img1" /><br />
<span id="ge"></span>
<input type="button" value="停止" id="btn" οnclick="startorstop();" />
</body>
</html>
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
