一、实现轮播图技术需求：
- 可以切换照片/图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeImg()
{
var img=document.getElementById("img1"); //获取当前照片
img.src="../img/2.png";
}
</script>
</head>
<body>
<input type="button" value="切换图片" onclick="changeImg()">
<br>
<img src="../img/1.jpg" id="img1"> //给定一个id
</body>
</html>
|
- 定时切换(一定时间)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//window对象是一个最顶层对象(setInterval之前的window.可以取消)
function test()
{
console.log("setInterval 调用了");
}
//1.2秒执行后继续等2秒执行
//setInterval("test()",2000);
//2.2秒执行后不再执行
//setTimeout("test()",2000);
var timeID;
function start()
{
timeID=setInterval("test()",2000); //2秒执行一次test()
}
function end()
{
clearInterval(timeID); //停止
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="start()"><br />
<input type="button" value="关闭定时器" onclick="end()"><br />
</body>
</html>
|
二、步骤分析
1. 确定事件：文档加载完成的事件 onload
2. 事件要触发：init()
3. 函数内要做的事情：
3.1 开启定时器：执行切换图片的函数:changeimg(获取要切换图片的要素)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=0;
function changeImg(){
var img=document.getElementById("img1"); //1.先获取当前对象
//2.计算出当前要切换到第几张图片
var c=i%3+1;
img.src="../img/"+c+".jpg"; //3.关键在于"c"获取当前哪个图片
i++; //结束后加1为了循环
}
function init(){ //init函数需要在1秒后实现changeImg函数
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()"> //body内onload事件直接出发init函数
<img src="../img/1.jpg" width="100%" id="img1"/> 目前放图片1 然后给名为img1为了获取方便
</body>
</html>
|
