今天学习的是使用JS来实现网页中的轮播图自动切换播放。
要实现这个需求,我们首先需要有一组图片,然后每隔三秒钟就去切换一张,一直循环不停切换。对其进行技术分析,首先要求我们能实现图片的切换,然后就是定时每隔三秒钟对页面进行一次操作。
先学习如何进行图片切换。这里使用的是最基础的图片切换方式,即点击按钮来切换图片。
首先使用HTML搭建整体框架,即一个button按钮<input type="button">和一个图片<img src=" ">,简要设置图片宽高使界面便于浏览,同时在<img>中需要给图片赋id值,便于JS获取图片。HTML搭建完成之后,使用<script>来构建切换图片的函数,首先是定义变量img1来获取图片,然后修改变量图片的路径就可以实现点击按钮切换图片的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeImg(){
var img1 = document.getElementById("img1");
img1.src = "../img/桌面.jpeg";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()"/>
<img src="../img/壁纸.jpeg" id="img1" height="200px" width="400px">
</body>
</html>
而要实现定时操作,只需要调用window.setInterval()方法,比如window.setInterval("alert('123')",2000)的作用是在页面中弹出弹窗显示123,每2000毫秒弹一次。
现在开始编写自动轮播图的代码,以两张图片为例。
首先是搭建框架,这里只用显示一张图片就可以,需要注意的是,要在<body>标签内添加onload,这样才可以在页面加载完成后触发操作。
然后在<script>中定义了两个函数,一个是进行图片切换的操作function changeImg(),另一个是固定间隔操作function init(),在init()中嵌套changeImg()函数,即init("changeImg()",1000),可以实现每固定间隔1000毫秒运行一次切换图片的函数changeImg(),需要注意的是切换图片不能固定,因为需要循环播放,这里采用的是定义变量index,比如图片为三张时,需要index%3+1,这样子运行的结果就是到4就重1开始重新循环,且只有1、2、3三个数字,这里需要保证图片的命名为123,这就成功的实现了图片的自动轮播。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("img1");
var curIndex = index%2+1;
img.src = "../img/"+curIndex+".jpeg"
index = index + 1
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpeg" id="img1" width="100%">
</body>
</html>