<!DOCTYPE html>
<html>
<head>
<style>
li{
display:inline;
}
</style>
</head>
<body>
<div class="main">
<ul class="title">
<li>显示图片1<li/>
<li>显示图片2<li/>
<li>显示图片3<li/>
</ul>
<div class="imgs">
<img scr="1.jpg" alt="1">
<img scr="2.jpg" alt="2">
<img scr="3.jpg" alt="3">
</div>
</div>
</body>
</html>
图片都在同一个位置，一次只显示1张图，另外两张图隐藏。
分享
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
img {
display: none;
}
</style>
</head>
<body>
<div class="main">
<ul class="title" id='box'>
<li class='item' data-index='0'>显示图片1
<li />
<li class='item' data-index='1'>显示图片2
<li />
<li class='item' data-index='2'>显示图片3
<li />
</ul>
<div class="imgs">
<img class='img' scr="1.jpg" alt="1">
<img class='img' scr="2.jpg" alt="2">
<img class='img' scr="3.jpg" alt="3">
</div>
</div>
</body>
<script>
let imgs = document.getElementsByClassName('img');
$('box').onmousemove = function(e) {
let index = e.target.dataset.index;
if(index) {
hideAll()
imgs[index].style.display = 'block';
}
}
function hideAll() {
let imgs = document.getElementsByClassName('img');
for(let i = 0; i < imgs.length; i++) {
imgs[i].style.display = 'none';
}
}
function $(id) {
return document.getElementById(id)
}
</script>
<html>
系统已结题
3月10日
已采纳回答
3月2日
创建了问题
3月2日
