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

运行效果:

前端使用Javascrip实现图片轮播

这样就显示了一张图片在网页上

实现图片轮播

如何实现图片轮播,我们可以这样思考,实现轮播就是上面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>
上一篇:http 400错误【原】


下一篇:mysql 查看版本和是否支持分区