检查了还是找不到问题 箭头点了图片没动 hidden 也没有隐藏
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0; text-decoration:none;}
body{padding: 20px;}
#list{width: 4200px;
height:400px;
position:absolute;
z-index :1;}
#list img{
float:left;}
#buttons{position: absolute;
height: 10px;
z-index: 2;
bottom:20px;
left:250px;
width: 100px
}
#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;
height: 40px;
position: absolute;
z-index:2;
top: 180px;
background-color:RGBA(0,0,0,.3);
color:#fff;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);//鼠标到此位置改变颜色
}
#container:hover .arrow{
display: block;
}
#prev{
left:20px;
}
#next{
right: 20px;
}
#container{
width:600px;
height:400px;
border:3px solid #333;
overflow:hidden;//隐藏超出列表
position:relative;//相对定位
}
</style>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');//通过get来获取该id值
var list = document.getElementById('list');
var buttons =document.getElementById('buttons').getElementsByTagName('span');
var prev =document.getElementById('prev');//左箭头
var next =document.getElementById('next');
var index =1;
var animated = false；
var timer;
function showButton(){
for (var i = 0; i< buttons.length;i++ ) {
if (buttons[i].className =='on') {
buttons[i].className='';
break;
}
}
buttons[index -1].className ='on';
}
function animate(offset){//动画效果
animated = ture;
var newLeft = parseInt(list.style.left)+offset;
var time =300;//位移总时间
var interval = 10；//位移间隔时间
var speed =offset/(time/interval);//每次位移量
function go(){
if (( speed<0&& parseInt(list.style.left)>newLeft)|| (speed>0&& parseInt(list.style.left)<newLeft)
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);//每次位移位置
}
else{
list.style.left =newLeft+'px';
if (newLeft>-600) {
list.style.left=2400+'px';
}
if (newLeft=-2400) {
list.style.left=600+'px';
}
}
}
function play(){
timer = setInterval(function(){
next.onclick();
}.3000);
}
function.stop(){
cleanInterval(timer);
}
next.onclick = function(){//右箭头点击
if (index ==5) {
index=1;
}
else{
index +=1;
}
index += 1;
showButton();
if (!animated) {
animate(-600);
}
}
prev.onclick = function(){
if (index ==1) {
index=5;
}
else{
index +=1;
}
showButton();
if (!animated) {
animate(600)
}
}
for (var i = 0; i<buttons.length; i++) {
buttons[i].onclick =function(){
if (this.className == 'on') {
return;
}
var myIndex =parseInt.getAttribute('index'));
var offset=-600*(myIndex -index);
animate(offset);
index=myIndex;
showButton();
debugger;
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;" >
<img src="images/4.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/1.jpg" alt=""/>
</div>
<div>
<span index="1"></span>
<span index="2" class></span>
<span index="3" class></span>
<span index="4" class></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
</body>
</html>
//xx.xx.xx 点代表从属关系
//parseInt:parseInt() 函数可解析一个字符串，并返回一个整数
