& lthtml lang = " en " & gt
& lthead & gt
& ltmeta charset="UTF-8 " >
& lttitle & gt最簡單的輪播廣告
& ltstyle & gt
body，div，ul，li {
邊距:0；
填充:0；
}
ul {
list-style-type:無；
}
正文{
背景:# 000；
文本對齊:居中；
字體:12px/20px Arial；
}
#框{
位置:相對；
寬度:492px
身高:172 px；
背景:# fff
邊框半徑:5px
邊框:8px純色# fff
保證金:10px auto；
}
#方框。列表{
位置:相對；
寬度:490px
身高:170 px；
溢出:隱藏；
邊框:1px實心# ccc
}
#方框。列出李{
位置:絕對；
top:0；
左:0；
寬度:490px
身高:170 px；
不透明度:0；
過渡:不透明度0.5s線性
}
#方框。列表li.current {
不透明度:1；
}
#方框。計數{
位置:絕對；
右:0；
底部:5px
}
#方框。李伯爵{
顏色:# fff
浮動:左；
寬度:20px
高度:20px
光標:指針；
右邊距:5px
溢出:隱藏；
背景:# F90
不透明度:0.7；
邊框半徑:20px
}
#方框。李伯爵.當前{
顏色:# fff
不透明度:0.7；
字體粗細:700；
背景:#f60
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv id = " box " & gt
& ltul class="list " >
& lt李class = " current " style = " opacity:1；& gt& ltimg src = " img/images 04/01 . jpg " width = " 490 " height = " 170 " >& lt/李& gt
& ltLi style = " opacity:0；"& gt& ltimg src = " img/images 04/02 . jpg " width = " 490 " height = " 170 " >& lt/李& gt
& ltLi style = " opacity:0；"& gt& ltimg src = " img/images 04/03 . jpg " width = " 490 " height = " 170 " >& lt/李& gt
& ltLi style = " opacity:0；"& gt& ltimg src = " img/images 04/04 . jpg " width = " 490 " height = " 170 " >& lt/李& gt
& ltLi style = " opacity:0；"& gt& ltimg src = " img/images 04/05 . jpg " width = " 490 " height = " 170 " >& lt/李& gt
& lt/ul & gt；
& ltul class="count " >
& lt李class= "當前" >1 & lt；/李& gt
& lt李class = " " & gt2 & lt/李& gt
& lt李class = " " & gt3 & lt/李& gt
& lt李class = " " & gt4 & lt/李& gt
& lt李class = " " & gt5 & lt/李& gt
& lt/ul & gt；
& lt/div & gt；
& lt腳本& gt
var box = document . getelementbyid(' box ')；
var uls = document . getelementsbytagname(' ul ')；
var imgs=uls[0]。getElementsByTagName(' Li ')；
var btn=uls[1]。getElementsByTagName(' Li ')；
var I = index = 0；//中間數量，統壹報表；
var play = null
console.log(box、uls、imgs、BTN)；//把事情辦好
//圖片切換，淡入淡出效果我用(轉場:不透明度0.8s線性)做的，css裏不糾結，簡單。
函數show(a){ //方法定義了當壹個下標傳入時，按鈕和圖片正確反應。
for(I = 0；我& ltbtn .長度；i++ ){
btn[i]。class name =“”；//容易理解嗎？每個按鈕先設置為不可見，然後當前按鈕設置為可見。
btn[a]。className= '當前'；
}
for(I = 0；我& ltimgs.lengthI++){ //設置圖片的效果和按鈕壹樣。
imgs[I]. style . opacity = 0；
imgs[a]. style . opacity = 1；
}
}
//切換按鈕功能，響應相應的圖片。
for(I = 0；我& ltbtn .長度；i++){
btn[i]。index = I；//不知道大家有沒有發現，循環中的方法在循環中調用變量體I，會出現I的變量值不被傳遞的問題。所以我先把它保存在循環之外
btn[i]。onmouseover=function(){
show(this . index)；
clearInterval(播放)；//這是最後壹句話加的函數。
}
}
//自動輪播方法
函數autoPlay(){
Play=setInterval(function(){ //這個Play是為了保存定時器。變量必須全局聲明，否則其他方法無法調整或者可以調用auto.play，也許可以，但是沒有時間去嘗試。
index++；
index & gt= imgs.length & amp& amp(索引= 0)；//可能有優先級問題，所以用了括號，沒時間測試。
顯示(索引)；
},1000)
}
autoPlay()；//馬上打電話。我試過用window.onload調用這個方法，但是調用後影響了其他方法，因為用的是autoPlay，所以只能這樣調用。
//div的鼠標移入和移出事件
box.onmouseover=function(){
clearInterval(播放)；
};
box.onmouseout=function(){
autoPlay()；
};
//按鈕下標也要加上相同的鼠標事件，否則畫面會停止，計時器也不會停止，會突然閃到壹個大數字。好像可以直接追加到之前定義的事件。
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；