首页htmljs实现点击切换图片

htmljs实现点击切换图片

时间: 2024-10-28 22:07:13 浏览: 8

HTML和JavaScript可以结合起来实现简单的点击切换图片功能。你可以创建一个包含几张图片的容器，然后编写JavaScript代码监听这个容器的点击事件。每当用户点击时，就切换当前显示的图片。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <title>图片切换</title> <style> #image-container { display: none; width: 200px; /* 图片宽度 */ height: 200px; /* 图片高度 */ } </style> </head> <body> <img id="current-image" src="image1.jpg" alt="默认图片"> <div id="image-container"> <img id="image1" src="image1.jpg" onclick="showImage(1)"> <img id="image2" src="image2.jpg" onclick="showImage(2)">  </div> <script> function showImage(imageIndex) { // 隐藏当前显示的图片 document.getElementById('current-image').style.display = 'none'; // 显示指定索引的图片，并设置为当前显示状态 var imageElement = document.getElementById('image' + imageIndex); imageElement.style.display = 'block'; document.getElementById('current-image').src = imageElement.src; } // 初始加载时显示第一张图片 showImage(1); </script> </body> </html> ``` 在这个例子中，当你点击`image1`, `image2`等元素时，对应的函数会被触发，隐藏当前显示的图片并切换到选择的那张图片。

阅读全文