js特效焦点图片翻滚如何让多个图片在html中只看到一个图片，浏览时候是有多个图片显示的
3个回答
展开全部
<html>
<head>
<title>图片的显示</title>
<style type="text/css">
<!--
#bg1 {
position:absolute;
width:162px;
height:115px;
z-index:1;
}
#bg2 {
position:absolute;
width:162px;
height:115px;
z-index:1;
left: 1px;
top: 1px;
display:none;
}
#b1 {
position:absolute;
width:22px;
height:21px;
z-index:2;
left: 60px;
top: 201px;
}
#b2 {
position:absolute;
width:22px;
height:24px;
z-index:3;
left: 84px;
top: 203px;
}
-->
</style>
<script>
function showbg1(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="none";
}
function showbg2(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="block";
}
</script>
</head>
<body>
<div id="bg1"><img src="mao.jpg" width="160" height="180" />
<div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>
</div>
<p> </p>
<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>
<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>
</body>
</html>
<head>
<title>图片的显示</title>
<style type="text/css">
<!--
#bg1 {
position:absolute;
width:162px;
height:115px;
z-index:1;
}
#bg2 {
position:absolute;
width:162px;
height:115px;
z-index:1;
left: 1px;
top: 1px;
display:none;
}
#b1 {
position:absolute;
width:22px;
height:21px;
z-index:2;
left: 60px;
top: 201px;
}
#b2 {
position:absolute;
width:22px;
height:24px;
z-index:3;
left: 84px;
top: 203px;
}
-->
</style>
<script>
function showbg1(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="none";
}
function showbg2(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="block";
}
</script>
</head>
<body>
<div id="bg1"><img src="mao.jpg" width="160" height="180" />
<div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>
</div>
<p> </p>
<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>
<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
包容所有图片的那个div，设置宽高为图片的大小，然后再设置overflow:hidden
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用setinterval()方法，每3秒调用一次函数，函数中写，不同图片地址
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
