纯HTML+JS实现轮播，轮播原理

最新推荐文章于 2021-06-02 15:34:32 发布

原创最新推荐文章于 2021-06-02 15:34:32 发布 · 384 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JS

前端#HTML#JS 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文介绍了如何使用纯HTML和JavaScript实现轮播图。通过点击按钮触发事件更换图片，或者设置定时器自动轮播。图片存储在数组中，通过改变数组索引实现图片切换效果。示例代码包括上一个和下一个按钮的点击事件处理函数。

纯HTML+JS实现轮播

点击实现轮播图的原理：触发事件更换图片
自动轮播图的原理：加入定时器，自动触发事件更换图片
图片存储在一个数组内，更换图片就是更换数组索引从而达到效果

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>轮播原理图</title>
</head>
<body>
<div>


<button onclick="prev()"> 上一个 </button>
<img id="slider" src="image/1.jpg" />
<button onclick="next()"> 下一个 </button>
</div>


<script>


var images = [
"image/1.jpg",
"image/2.jpg",
"image/3.jpg"
];



function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {　　　　
num = 0;
}
slider.src = images[num];　　　　
}



function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {　　　　　　　　　　
num = images.length-1;
}
slider.src = images[num];　　　　
}
</script>
</body>
</html>