图片切换不了,谢谢
<!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>
图片和老师的不太一样 所以宽度不一样