JavaScript学习之自动轮播图片
程序员文章站
2022-05-08 08:01:31
定时器 在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval() 1、setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 setInterval() 方法会不停地调用函数，直到 clearInterval ......
定时器
在实现轮播图之前需要首先了解一下javascript的定时器 setinterval()和clearinterval()
1、setinterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
setinterval() 方法会不停地调用函数，直到 clearinterval() 被调用或窗口被关闭。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的参数
语法：
setinterval(code, milliseconds);
2、clearinterval() 方法可取消由 setinterval() 函数设定的定时执行操作，clearinterval() 方法的参数必须是由 setinterval() 返回的 id 值
语法：
clearinterval(id_of_setinterval)
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
console.log("setinterval 调用了");
}
var timerid;
function startdinshiqi(){
timerid = setinterval("test()",2000);
}
function stopdingshiqi(){
clearinterval(timerid);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startdinshiqi()" /><br />
<input type="button" value="取消定时器" onclick="stopdingshiqi()"/><br />
</body>
</html>
切换图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeimg(){
// alert("要切换了")
var img = document.getelementbyid("img1");
img.src = "../img/2.jpg";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeimg()" />
<br />
<img src="../img/1.jpg" id="img1" />
</body>
</html>
图片自动轮播
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var index = 0;
function changeimg(){
//1. 获得要切换图片的那个元素
var img = document.getelementbyid("img1");
//计算出当前要切换到第几张图片
var curindex = index%3 + 1; //0,1,2
img.src="../img/"+curindex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init(){
setinterval("changeimg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>