版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Point9/article/details/83246393
本文主要讲述JavaScript原生轮播图实例，如需JavaScript基础请到菜鸟教程自己补习。
目录结构
目标与思路
本文讲述最基础的版本:
页面加载完成后自动轮播
实现思路：
思路：
1、获取图片标签
2、通过改变图片路径改变图片内容
3、点击事件调用changeImgs函数
4、实现无缝轮播
5、计时器函数--自动轮播
项目源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
/**
* 目标：无需点击图片自动轮播
* 思路：1、获取图片标签
* 2、通过改变图片路径改变图片内容
* 3、点击事件调用changeImgs函数
* 4、实现无缝轮播
* 5、计时器函数--自动轮播
*/
var index = 0;
function changeImgs() {
//获得要切换图片的那个元素
var imgs = document.getElementById("imgs");
//计算出当前要切换到第几张图片
var curIndex = index % 3 + 1; //0,1,2
imgs.src = "../images/ " + curIndex + ".jpeg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
//定时器函数
function init() {
setInterval("changeImgs()", 1000);
}
</script>
<body onload="init()">
<div style="width: 800px ;height: 400px;border:1px solid black;margin: 0 auto;">
<img src="../images/1.jpeg" width="100%" height="100%" id="imgs"/>
</div>
</body>
</html>运行结果
大家自行运行测试，项目所需的图片文件，我放在下面的链接中。
链接:https://pan.baidu.com/s/1W7GWsdPz0C3Z8aFKuSvprg 密码:05fy
Web全栈技术交流
点击链接加入群聊【Web全栈交流群】：https://jq.qq.com/?_wv=1027&k=5rnUzsF
