<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="Untitled-2.css" type="text/css">
</head>
<body>
<div class="swiper">
<div class="container" style="left:-600px">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="clear"></div>
</div>
<div class="bottons">
<div class="botton1 botton left"></div>
<div class="botton2 botton left"></div>
<div class="botton3 botton left"></div>
<div class="botton4 botton left"></div>
<div class="clear"></div>
</div>
<div class="arrow prev"><</div>
<div class="arrow next">></div>
</div>
<script>
window.onload=function(){
var swiper=document.getElementsByClassName("swiper");
var container=document.getElementsByClassName("container");
var slide=document.getElementsByClassName("slide");
var botton=document.getElementsByClassName("botton");
var prev=document.getElementsByClassName("prev");
var next=document.getElementsByClassName("next");
function animate(offset){
container.style.left=parseInt(container.style.left)+offset+"px";
};
prev.onclick=function(){
animate(600);
};
next.onclick=function(){
animate(-600);
}
}
</script>
</body>
</html>
首先你使用document.getElementsByClassName()来获取元素其实获取的是一个数组，并不是这个元素，你这样写document.getElementsByClassName("container")[0]; 在获取元素后加个[0],，然后再点击prev或者next就会发现容器的left值有变化
你Class给的BUTTONS
调用的时候是button
css另外写的..加载进去了
没图片当然没有用