為什么我的onclick點(diǎn)擊一次改變了left的值以后，第二次就不能觸發(fā)，繼續(xù)改變Left的值了呢？
<!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>
2016-04-15
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是一個(gè)字符串你要做計(jì)算的時(shí)候得用parseInt(list.style.left)
2016-04-14
具體不知道，但是這應(yīng)該與屬性優(yōu)先級(jí)有關(guān)當(dāng)你把那個(gè)屬性放到標(biāo)簽內(nèi)部時(shí)就可以多次使用了！
<ul class="box-list" id="list" style="left:0px">別寫在就可以用了