看了兩遍視頻，自己整理出來的源代碼，樣式有些不一樣。不過，功能都能實現
<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>
