定时器
在实现轮播图之前需要首先了解一下 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>
来源: http://www.bubuko.com/infodetail-3026149.html