这样写为什么点击a标签，图片不会变化
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
body,ul{margin: 0; padding: 0;}
li{list-style: none;}
.banner{
width: 800px;
height: 450px;
margin: 100px auto;
position: relative;
overflow:hidden;
}
.banner_imgs{
width: 800px;
position: absolute;
left: 0;
top:0px;
}
.banner_imgs li{
float: left;
}
.banner_imgs img{
width: 800px;
height: 100%;
display: block;
}
.number{
width: 100%;
text-align:center;
position: absolute;
left: 0;
bottom: 20px;
}
.number a{
display: inline-block;
width: 20px;
background-color: #fff;
height: 6px;
overflow: hidden;
}
</style>
<script>
window.onload =function(){
var img=document.getElementById("img");
var a=document.getElementById("number").getElementsByTagName("a");
var b=[];
for(var j=0;j<a.length;j++){
b.push(j);
b[j].onclick=function(){
img.style.top=-450*this+'px';
}
}
}
</script>
</head>
<body>
<div class="banner">
<ul id="img" class="banner_imgs">
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></a></li>
</ul>
<div id="number" class="number">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
var img=document.getElementById("img"); var a=document.getElementById("number").getElementsByTagName("a"); var b=[]; for(var j=0;j<a.length;j++){ (function(j){ a[j].onclick= function(){ img.style.top=-450*j+'px'; } }(j)) }2019-07-17 19:01:45赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
