使用到的知识点：
模板字符串 ` `
js中的src属性 img.src = `./images/${i}.jpg`
效果展示：
具体代码实现：
<body>
<div class="box" style="width:500px;height:300px;margin:100px auto;">
<img src="./images/1.jpg" alt="" style="width:100%;height:100%;">
</div>
<script>
// 点击图片进行切换图片
var i = 1;
let img = document.querySelector('img')
img.onclick = function () {
img.src = `./images/${i}.jpg`
i++;
if (i > 6) {
i = 1
}
}
</script>
</body>代码讲解：
1、先创建一个盒子，里面放图片，让图片的宽和高等于父盒子的高度（让图片占满父盒子）。
2、使用js中的document.querySelector('img')，获取图片元素。
3、在外面定义一个全局的 i 变量，赋值为1,（因为图片的命名是从1开始的）。
4、每次点击图片就让 i 的值加1，如果大于图片总数就赋值为初始值，模拟点击图片轮播效果。
5、给图片添加一个点击事件，点击图片的时候，使用img.src = `xxx`来改变img中图片的路径。
6、使用模板字符串 ` xxx ` 中的 ${ i } 来获取动态的 i 值，将每次点击之后的 i 的值，放到img的src中，实现点击切换图片的效果。（这里不是获取，只是便于理解！）
文件夹展示：
需要在里面创建一个images文件夹，里面有自定义张图片，为可方便使用数字进行命名。
使用时，使用 ./images/n,jpg 使用即可
