图片轮播是网页制作中常见的效果之一,在HTML中实现也不难。下面是一个简单的图片轮播代码示例。
<html> <head> <title>图片轮播</title> <script> var num=0; //记录当前显示的图片的编号 function changeImg(){ //切换图片的函数 num++; if(num==4){ //判断是否超出图片数量 num=0; //如果超出,则从头开始 } var img=document.getElementById("img"); img.src="images/"+num+".jpg"; //设置图片路径 } window.onload=function(){ setInterval("changeImg()",2000); //定时器,每隔2秒自动切换图片 } </script> </head> <body> <img id="img" src="images/0.jpg"> //默认显示编号为0的图片 </body> </html>
代码解释:
首先,我们定义了一个变量num,用来记录当前显示的图片的编号。接着,我们编写了一个函数changeImg(),该函数用来切换图片。在函数中,我们将num加1,并判断是否超出图片数量。如果超出,则将num重置为0。最后,我们通过getElementById()方法获取到img元素,然后将其src属性设置为对应的图片路径。
在页面加载完毕后,我们使用setInterval()方法设置一个定时器来调用changeImg()函数,从而实现自动切换图片的效果。
最后,我们在
标签中插入一张默认显示的图片,其中id属性为"img",src属性为默认图片的路径。版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。