<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"?/>
<title></title>
<style>
*{margin:0;padding:0;text-decoration:none;}
body{padding:20px}
#container{width:600px;height:400px;border:3px?solid?#333;overflow:hidden;position:relative;margin:0?auto;}
#list{width:4200px;height:400px;position:absolute;z-index:1;}
#list?img{float:left;}
#buttons{position:absolute;width:100px;height:10px;bottom:20px;left:250px;z-index:2;}
#buttons?span{cursor:pointer;display:block;float:left;width:10px;height:10px;border:1px?solid?#FFF;border-radius:50%;background:#333;margin-right:5px;}
.arrow{position:absolute;display:none;width:40px;height:40px;line-height:40px;z-index:2;font-size:36px;text-align:center;font-weight:bold;top:180px;background-color:rgba(0,0,0,.3);color:#FFF;}
#prev{left:20px;}
#next{right:20px;}
#container:hover?.arrow{display:block;}
.arrow:hover{background-color:rgba(0,0,0,.7);}
</style>
<script>
window.onload?=?function(){
var?container?=?document.getElementById('container');
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(-600);
if(list.style.left<-3000){
list.style.left=-600+'px';
}
}
prev.onclick?=function(){
animate(600);
if(list.style.left>-600){
list.style.left=-3000+'px';
}
}
}
</script>
</head>
<body>
<div?id="container">
<div?id="list"?style="left:-600px">
<img?src="img/5.jpg"?alt=""?title="">
<img?src="img/1.jpg"?alt=""?title="">
<img?src="img/2.jpg"?alt=""?title="">
<img?src="img/3.jpg"?alt=""?title="">
<img?src="img/4.jpg"?alt=""?title="">
<img?src="img/5.jpg"?alt=""?title="">
<img?src="img/1.jpg"?alt=""?title="">
</div>
<div?id="buttons">
<span?index="1"?class="on"></span>
<span?index="2"?class=""></span>
<span?index="3"?class=""></span>
<span?index="4"?class=""></span>
<span?index="5"?class=""></span>
</div>
<a?href="#"?id="prev"?class="arrow"><</a>
<a?href="#"?id="next"?class="arrow">></a>
</div>
</body>
</html>
2016-12-09
function?showButton(){ ????for(var?i=0;i<buttons.length;i++){ ????????buttons[i].className=''; ????} ????if(index>5){ index=1; ????} ????if(index<1){ index=5; ????} ????buttons[index].className='on'; }我是這樣寫的，不過點擊事件函數里面index+=1和index-=1應該放在showButton();前面，如下
next.onclick=function(){
???? animate(-720);
???? index+=1;
???? showButton();
}
prev.onclick=function(){
???? animate(720);
???? index-=1;
???? showButton();
}
2017-03-27
請問你的問題,該怎么解釋呢,我也有相同的疑問,上面回答顯然沒答到點子上啊.