前端使用Javascrip实现图片轮播
Javascript实现网页图片自动轮播
1、创建一个img标签
设置默认图片，以及图片的高度和宽度，为了大家方便，我将CSS样式和JS语句都写在一个html文件中，演示用的图片来自小明官网：'https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg' 和 'https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="">
<img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt=""> //将img标签设置到a标签中（可以把a标签设置成块显示）并设置图片高宽度
</a>
</body>
</html>
运行效果：
这样就显示了一张图片在网页上
实现图片轮播
如何实现图片轮播，我们可以这样思考，实现轮播就是上面a标签的src被修改，而且是定时循环修改，这时候你就想到了js中DOM中setinterva方法，于是写出了以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href=""><img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt=""></a>
<script>
function foo()
{
//创建要轮播的图片列表，元素为图片地址
let imgList = ['https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg','https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'];
//找到要轮播图片的img标签,通过id寻找
let imgTable=document.getElementById('i1');
//获取当前img标签的src，
let img_src= imgTable.getAttribute('src');
//获取当前src在图片列表中的索引，如果该索引加一小于等于列表长度，即可索引加1，修改src播放下一张图片
let img_index = imgList.indexOf(img_src)+1;
if (img_index<imgList.length)
{
imgTable.setAttribute('src',imgList[img_index]);
}
else
{
imgTable.setAttribute('src',imgList[0])
}
}
setInterval(foo,2000)
</script>
</body>
</html>
