首页轮播图html+css+javascript

轮播图html+css+javascript

时间: 2023-12-23 07:27:52 浏览: 116

以下是一个使用HTML、CSS和JavaScript实现轮播图的例子： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> #box { position: relative; margin: 100px auto; overflow: hidden; width: 520px; height: 280px; background-color: grey; } #box img { width: 100%; height: 100%; } </style> </head> <body> <div id="box"> <img id="lunbo_img" src="images/img1.jpg"> </div> <script> var index = 1; function lunbo(){ index ++; if(index > 5){ index = 1; } var img = document.getElementById('lunbo_img'); img.src = "images/img"+index+".jpg"; } setInterval(lunbo, 2000); </script> </body> </html> ``` 这个例子中，我们使用了一个包含图片的`<div>`元素作为轮播图的容器，通过JavaScript代码实现图片的切换。每隔2秒钟，`lunbo()`函数会被调用一次，通过改变图片的`src`属性来切换图片。

阅读全文