为什么我的onclick点击一次改变了left的值以后，第二次就不能触发，继续改变Left的值了呢？
慕先生8562269
2016-04-14 09:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 20px auto;
}
.img-box{
width: 1000px;
height: 280px;
overflow: hidden;
position: relative;
}
.box-list{
width: 5000px;
height: 280px;
position: absolute;
left: 0px;
z-index: 1;
}
.box-list li{
float: left;
}
.button{
width: 39px;
height: 8px;
position: absolute;
margin: 260px 500px;
z-index: 2;
}
.button span{
width: 6px;
height: 6px;
border:1px solid #fff;
display: inline-block;
border-radius: 6px;
margin-right:3px ;
}
.button span:hover{
background: #fff;
cursor:pointer;
}
.btn{
cursor:pointer;
font-size: 36px;
font-weight: bold;
color: #fff;
display: block;
position: absolute;
z-index: 2;
width: 35px;
height: 40px;
margin-top: 140px;
background: rgba(76,76,76,0.3);
padding-left: 10px;
}
.left-btn{
left: 20px;
}
.right-btn{
right:20px;
}
.left-btn:hover,.right-btn:hover{
background: rgba(76, 76, 76, 0.8);
}
</style>
</head>
<script>
function getId(id){
return document.getElementById(id);
}
window.onload = function(){
var list = getId("list");
var leftBtn = getId("left");
var rightBtn = getId("right");
leftBtn.onclick = function(){
list.style.left = list.style.left -1000+'px';
}
rightBtn.onclick = function(){
list.style.left = list.style.left +1000+'px';
}
}
</script>
<body>
<div class="img-box" id="container">
<ul class="box-list" id="list" >
<li><img src="images/ad4.jpg"></li>
<li><img src="images/ad2.jpg"></li>
<li><img src="images/ad3.jpg"></li>
</ul>
<div class="button" id="btn">
<span index="1"><a href=""></a></span>
<span index="2"><a href=""></a></span>
<span index="3"><a href=""></a></span>
</div>
<a class="left-btn btn" id="left"><</a>
<a class="right-btn btn" id="right">></a>
</div>
</body>
</html>
2回答
-
- mazhiqiang1216
- 2016-04-15 07:29:54
leftBtn.onclick = function(){
list.style.left = list.style.left -1000+'px';
}
rightBtn.onclick = function(){
list.style.left = list.style.left +1000+'px';
}list.style.left是一个字符串你要做计算的时候得用parseInt(list.style.left)
-
- mazhiqiang1216
- 2016-04-14 10:08:26
具体不知道，但是这应该与属性优先级有关当你把那个属性放到标签内部时就可以多次使用了！
<ul class="box-list" id="list" style="left:0px">别写在就可以用了
焦点图轮播特效
65279 学习 · 611 问题
相似问题