首页用html写一个可以通过按钮随机切换图片，图片拥有对应注释的页面

用html写一个可以通过按钮随机切换图片，图片拥有对应注释的页面

时间: 2023-03-10 21:07:51 浏览: 213

可以使用以下 HTML 和 JavaScript 代码来实现：<html> <head> <title>图片切换</title> </head> <body> <h1>图片切换</h1> <button onclick="changeImage()">切换图片</button> <img id="image" src="image1.jpg" alt="图片1" /> <p id="caption">这是图片1的描述文字。</p> <script> let images = ["image1.jpg", "image2.jpg", "image3.jpg"]; let captions = ["这是图片1的描述文字。", "这是图片2的描述文字。", "这是图片3的描述文字。"]; function changeImage() { let randomNumber = Math.floor(Math.random() * images.length); document.getElementById("image").src = images[randomNumber]; document.getElementById("caption").innerHTML = captions[randomNumber]; } </script> </body> </html>

用html写一个可以通过按钮随机切换图片且图片不重复出现，图片拥有对应注释的页面

可以使用以下 HTML 代码来实现：<html> <head> <script> var images = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ];function randomImage() { var image = images[Math.floor(Math.random() * images.length)]; document.getElementById('image').src = image; } </script> </head> <body> <img id="image" src="image1.jpg" alt="Random Image" /> <button onclick="randomImage()">随机切换图片</button> <p>该图片的注释：XXX</p> </body> </html>

阅读全文