實現思路：
1、for循環給數字按鈕加上點擊事件。
2.for循環先把按鈕的樣式清空，再把當前樣式設置樣式。
3、給每個按鈕添加自定義屬性index aBtn[i].index=i aBtn[2]=2 第二個按鈕和第二張圖片想對應，用運動框架把大圖的UL每次移動-150px，因為圖片高度是150px。如果移動到第n張圖片就是-150*n。
4、定義變量now，用來自動播放用的。把當前圖片賦值給now now=this.index。
5、定義自動播放函數。now++ 下一張，if判斷，到最後一張圖片的時候就把now設置為0，就是第一張。 if(now==aBtn.length)
6、定義定時器，每2秒就調用一次自動播放函數。
7、鼠標指向圖片時就清除定時器。
8、鼠標離開圖片時就開啟定時器。
復制代碼 代碼如下:
<script>
window.onload=function()
{
var oDiv=document.getElementById('play');
var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oDiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function()
{
now=this.index; //當前值賦給now
tab();
}
};
function tab()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className=''; //把所有按鈕的樣式清空
};
aBtn[now].className='active'; //當前按鈕樣式設置
startMove(oUl,{top:-150*now}); //用運動框架把UL的TOP設置為當前個數*-150，第三張圖片就是2*-150
};
function next()
{
now++; //切換圖片
if(now==aBtn.length) //如果到了最後一張圖片
{
now=0; // 把圖片拉回第一張
}
tab(); //把圖片拉回第一張後繼續運動
};
var timer=setInterval(next,2000); //2秒自動切換圖片
oDiv.onmouseover=function()
{
clearInterval(timer); //清除定時器
};
oDiv.onmouseout=function()
{
timer=setInterval(next,2000); //開啟定時器
};
};
</script>
完整代碼：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶幻燈片上下滑動效果 —— www.zhinengshe.com —— 智能課堂</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="baseCommon.js"></script>
<script>
window.onload=function()
{
var oDiv=document.getElementById('play');
var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oDiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function()
{
now=this.index; //當前值賦給now
tab();
}
};
function tab()
{
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className=''; //把所有按鈕的樣式清空
};
aBtn[now].className='active'; //當前按鈕樣式設置
startMove(oUl,{top:-150*now}); //用運動框架把UL的TOP設置為當前個數*-150，第三張圖片就是2*-150
};
function next()
{
now++; //切換圖片
if(now==aBtn.length) //如果到了最後一張圖片
{
now=0; // 把圖片拉回第一張
}
tab(); //把圖片拉回第一張後繼續運動
};
var timer=setInterval(next,2000); //2秒自動切換圖片
oDiv.onmouseover=function()
{
clearInterval(timer); //清除定時器
};
oDiv.onmouseout=function()
{
timer=setInterval(next,2000); //開啟定時器
};
};
</script>
</head>
<body>
<div class="play" id="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="廣告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="廣告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="廣告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="廣告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="廣告五" /></a></li>
</ul>
</div>
</body>
</html>