為什么我的箭頭和小圓點跟著第一張圖片跑？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片輪播</title>
<style type="text/css">
*{margin:0;padding: 0}
body{padding: 20px}
a{text-decoration: none}
?#contaier{
? ? ?margin:0 auto;
? ? ?width: 1070px;
? ? ?height: 338px;
? ? ?background:2px solid red;
? ? ?overflow:hidden;
? ? ?position: relative;}
#list{width: 6420px;height: 338px;position: absolute;z-index: 1;}
#list img{float: left; }
#buttons {position: absolute; height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 535px; margin-left: 10px; }
#buttons span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius:10px; }
#buttons .on{background: orangered;}
.arrow{cursor: pointer;
? line-height:40px;
/* ?display: none; */
? text-align: center;
? font-size: 36px;
? font-weight: bold;?
? width: 40px;
? height: 40px;
? position: absolute;
? z-index:2;top: 140px;
? background: rgba(0,0,0,0.3);
}
.arrow:hover{background-color: rgba(0,0,0,0.7);}
?#contaier:hover .arrow{display: block;}
?#prev{position:absolute; left: 20px;}
?#next{position:absolute; left: 1010px;}
</style>
</head>
<body>
<div id="contaier">
<div id="list" style="left: 0px ;">
? ? <img src="images/04.jpg">?
?<img src="images/01.jpg">?
?<img src="images/02.jpg">?
? ? <img src="images/03.jpg">?
? ? <img src="images/04.jpg">?
? ? <img src="images/01.jpg">?
? <div id="buttons">
? ? ?<span index="1"></span>
? ? ?<span index="2"></span>
? ? ?<span index="3"></span>
? ? ?<span index="4"></span>
? </div>
? <a href="javascript:;" id="prev"><</a>
? <a href="javascript:;" id="next">></a>
</div>
</div>
<script type="text/javascript">
? var container=document.getElementById('contaier');
? var list=document.getElementById('list');
? var buttons=document.getElementById('buttons').getElementsByTagName('span');
? var prev=document.getElementById('prev');
? var next=document.getElementById('next');
? function animate(offset){
? ? ? list.style.left=parseInt(list.style.left)+offset+'px';
? }
? ?next.onclick=function(){
? ? ? ?animate(-1070);
? ?}
? ?prev.onclick=function(){
? ? ? ?animate(1070);
? ?}
</script>
</body>
</html>
2017-05-16
你把箭頭和小圓點都放在圖片的div里了，試著把圖片還有箭頭跟小圓點分開放