看了两遍视频，自己整理出来的源代码，样式有些不一样。不过，功能都能实现
<style>
*{ margin:0; padding:0; text-decoration:none;}
body{ padding:20px;}
#container{ width:600px; height:400px; border:3px solid #f00; overflow:hidden; position:relative;}
#list{ width:4200px; height:400px; position:absolute; z-index:1;}
#list img{ float:left;}
#buttons{ position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}
#buttons span{ cursor:pointer; float:left; border:1px solid #000; width:10px; height:10px; margin-right:5px;}
#buttons .on{ background:#f00;}
.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:#ccc;}
.arrow:hover{ background:#000;}
#container:hover .arrow{ display:block;}
#prev{ left:20px;}
#next{ right:20px;}
</style>
<script type="text/javascript">
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');
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 = true;
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{
animated = false;
list.style.left = newLeft + 'px';
if(newLeft > -600){
list.style.left = -3000 + 'px';
}
if(newLeft < -3000){
list.style.left = -600 + 'px';
}
}
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
next.onclick = function(){
if(index == 5){
index = 1;
}
else{
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(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
if(!animated){
animate(offset);
}
index = myIndex;
showButton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px; ">
<img src="images/005.jpg" alt=""/>
<img src="images/001.jpg" alt=""/>
<img src="images/002.jpg" alt=""/>
<img src="images/003.jpg" alt=""/>
<img src="images/004.jpg" alt=""/>
<img src="images/005.jpg" alt=""/>
<img src="images/001.jpg" alt=""/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
