輸入alert取值發(fā)現(xiàn)list.style.left的值可以取到，但是點擊箭頭圖片不切換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
? ? ? *{ margin:0; padding:0; text-decoration:none;}
? ? ? body { padding:20px;}
?#container { width:600px; height:400px; border:3px solid #333; overflow:hidden; position:relative;}
?#list { width:4200px; height:400px; position:absolute; z-index:1;}
?#list img { float:left;}
?#buttons { position:absolute; height:10px; width:100px; z-index:2;bottom:20px; left:250px;}
?#buttons span { cursor:pointer; float:left;border:1px solid #fff; width:10px; height:10px; border-radius:50%; background:#333; margin-right:5px; }
?#buttons .on{ background:orangered;}
?.arrow { cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;font-weight:bold; width:40px; height40px;
? position:absolute; z-index:2; top:35px;}
? ? ? .arrow:hover { background-color:RGBA(0,0,0,.7);}
?#container:hover .arrow{ display:block;}
?#prev { left:20px;}
?#next { right:20px;}
</style>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
next.onclick = function(){
list.style.left = parseInt(list.style.left) - 600 + 'px';
alert(list.style.left)
}
prev.onclick = function(){
list.style.left = parseInt(list.style.left) + 600 + 'px';
alert(list.style.left)
}
}
</script>
</head>
<body>
? ? ?<div id="container">
? ? ? <div id="list" style="left:-600px;">
? ? ? ? ? ? <img src="images/5.jpg" alt="">
? ? ? ? <img src="images/1.jpg" alt="">
? ? ? ? ? ? <img src="images/2.jpg" alt="">
? ? ? ? ? ? <img src="images/3.jpg" alt="">
? ? ? ? ? ? <img src="images/4.jpg" alt="">
? ? ? ? ? ? <img src="images/5.jpg" alt="">
? ? ? ? ? ? <img src="images/1.jpg" alt="">
? ? ? ? ? ??
? ? ? ? ? ?
? ? ? ? </div>
? ? ? ? <div id="buttons">
? ? ? ? ? <span index="1" class="on"></span>
? ? ? ? ? ? <span index="2"></span>
? ? ? ? ? ? <span index="3"></span>
? ? ? ? ? ? <span index="4"></span>
? ? ? ? ? ? <span index="5"></span>
? ? ? ? </div>
? ? ? ? <a href="javascript:;" class="arrow" id="prev"><</a>
? ? ? ? <a href="javascript:;" class="arrow" id="next">></a>
? ? ? ??
? ? ?</div>
</body>
</html>
2018-09-05
list.style.left = parseInt(list.style.left) - 3000 + 'px';
//同理下面的也是