js--1图片切换，定时器，自动轮播，图片显示隐藏
Posted wml2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js--1图片切换，定时器，自动轮播，图片显示隐藏相关的知识，希望对你有一定的参考价值。
2定时器--setTimeout（）和setInterval（）的用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* 1. 事件: 点击事件 onclick 2. 事件要触发函数: changeImg 3. 在函数中 */ function changeImg(){ // alert("要切换了") var img = document.getElementById("img1"); img.src = "../img/1-161104143944.gif"; } </script> </head> <body> <input type="button" value="点击切换图片" onclick="changeImg()" /> <br /> <img src="../img/222.jpg" id="img1" /> </body> </html>
2定时器--setTimeout（）和setInterval（）的用法
（1）setTimeout()用法
- setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(code,millisec)
code：必需。要调用的函数后要执行的 javascript代码串。
millisec： 必需。在执行代码前需等待的毫秒数。
- clearInterval(timerID)：用于取消 setTimeout() 函数设定的定时执行操作。
（2）setInterval（）用法
setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
- setInterval用于延迟执行某方法或功能
示例：setInterval(‘alert("Hello");‘, 3000);
- clearInterval(timerID)：用于取消setInterval 函数设定的定时执行操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 对象是一个最顶层对象
// window.setInterval("alert(‘123‘);",2000);
function test(){
console.log("setInterval 调用了");
}
// setInterval("test()",2000);
// 第一个参数是要执行的函数或者是代码串，第二个程序要实行的间隔时间，毫秒为单位
// setTimeout("test()",2000);
var timerID;
//开启定时器
function startDinshiqi(){
timerID = setInterval("test()",2000);
//timerID = setTimeout("test()",3000);
}
//关闭定时器
function stopDingshiqi(){
clearInterval(timerID);
// clearTimeout(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>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//文档加载顺序
// var img = document.getElementById("img1");
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()" />
<input type="button" value="隐藏" onclick="hideImg()" /><br />
<img src="../img/1-161104143944.gif" id="img1" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
</body>
</html>
以上是关于js--1图片切换，定时器，自动轮播，图片显示隐藏的主要内容，如果未能解决你的问题，请参考以下文章