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