图片轮播是网页制作中常见的效果之一,在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属性为默认图片的路径。