图片切换不了,谢谢
<!DOCTYPE html>
<html>
<head>
<meta>
<meta http-equiv="Content-type" content="text/html; charset=utf-8 ">
<title>焦点图轮播效果</title>
<style type="text/css">
*{margin: 0; padding: 0; text-decoration: none;}
body{padding: 20px; background-color: #707070;}
#container{width: 329px; height: 585px; border: 3px solid #999; overflow: hidden; position: relative; margin: 0 auto;}
#list{width: 2632px; height: 585px; position: absolute; z-index: 1;}
#list img{width: 329px; height: 585px; float: left;}
#button{position: absolute; height: 10px; width:99px; z-index: 2; bottom: 20px; left: 115px; }
#button span{cursor: pointer; width: 10px; height: 10px; border: 1px solid #fff; float: left; border-radius: 50%; margin: 0px 2px; background-color: #333;}
#button .on{background-color: #F78F07;}
.arrow{cursor: pointer; display: none; line-height: 80px; text-align: center; font-size: 25px; font-weight: bold; width: 30px; height: 80px; position: absolute; z-index: 2; background-color: rgba(0,0,0,.3); top: 220px; color: #333;}
.arrow{background-color: rgba(0,0,0,.2);}
#container:hover .arrow{display: block;}
#prev{left: 10px;}
#next{right: 10px;}
</style>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var button = document.getElementById('button').getElementByTagname('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
next.onclick = function(){
list.style.left = parseInt(list.style.left) - 329 + 'px';
}
prev.onclick = function(){
list.style.left = parseInt(list.style.left) + 329 + 'px';
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -329px;">
<img src="img/img6.jpg" alt="" />
<img src="img/img1.jpg" alt="" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
<img src="img/img4.jpg" alt="" />
<img src="img/img5.jpg" alt="" />
<img src="img/img6.jpg" alt="" />
<img src="img/img1.jpg" alt="" />
</div>
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
<span index="6"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>图片和老师的不太一样 所以宽度不一样