<!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>
还有就是图片的是src而不是scr
可以用jQuery鼠标定位来实现，思路就是jq 找出鼠标的定位，然后根据鼠标用绝对定位显示图片出来
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
li {
display: inline;
}
.imgs{ position: fixed; display: none;}
</style>
</head>
<body>
<div class="main">
<ul class="title">
<li class="text1" text-data='1.jpg'>显示图片1
<li />
<li class="text1" text-data='2.jpg'>显示图片2
<li />
<li class="text1" text-data='3.jpg'>显示图片3
<li />
</ul>
<div class="imgs">
<img src="./1.jpg" alt="1">
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("ul li").on({
mouseover: function (e) {
x=e.pageX+10;
y=e.pageY+10;
img=$(this).attr('text-data');
$('.imgs').css({
'display':'block',
"left":x+"px",
"top":y+"px",
});
$('.imgs img').attr('src',img);
},
mouseout: function (e) {
$('.imgs').hide();
},
});
});
</script>
</html>
动态使用display:none
给li标签加一个onmouseover鼠标悬浮事件，img1显示，使用show方法，img2与img3使用hide方法，