前端使用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>