首页写一个html代码，上面一个盒子下面一个盒子，上面的盒子放置两张轮播图片，下面的盒子放置两列文字，鼠标触碰第一列文字，上面盒子显示第一张图片，鼠标触碰第二列文字，上面的盒子显示第二张图片。鼠标不触碰文字时，只显示第一张图片。

写一个html代码，上面一个盒子下面一个盒子，上面的盒子放置两张轮播图片，下面的盒子放置两列文字，鼠标触碰第一列文字，上面盒子显示第一张图片，鼠标触碰第二列文字，上面的盒子显示第二张图片。鼠标不触碰文字时，只显示第一张图片。

时间: 2024-05-16 09:12:17 浏览: 55

好的，以下是您需要的 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <meta charset="UTF-8"> <style> .container { display: flex; } .image-box { width: 50%; height: 400px; overflow: hidden; } .image-box img { width: 100%; height: auto; } .text-box { width: 50%; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; cursor: pointer; } .text-box:hover { color: blue; } </style> </head> <body> <div class="container"> <div class="image-box"> <img src="轮播图片1.jpg" alt="轮播图片1"> <img src="轮播图片2.jpg" alt="轮播图片2"> </div> <div class="text-box" id="text-box1">文字列1</div> <div class="text-box" id="text-box2">文字列2</div> </div> <script> var img1 = document.getElementsByTagName("img")[0]; var img2 = document.getElementsByTagName("img")[1]; var textBox1 = document.getElementById("text-box1"); var textBox2 = document.getElementById("text-box2"); textBox1.onmouseover = function() { img1.style.display = "block"; img2.style.display = "none"; } textBox2.onmouseover = function() { img1.style.display = "none"; img2.style.display = "block"; } img1.style.display = "block"; img2.style.display = "none"; </script> </body> </html> ``` 希望能帮到您！

阅读全文