<html lang="en">
<head>
<meta charset="UTF-8">
<title>最簡單的輪播廣告</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
border: 1px solid #ccc;
}
#box .list li {
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box .list li.current {
opacity: 1;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 0.7;
font-weight: 700;
background: #f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
<script>
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);//獲取正確
//圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結、簡單 在css裏面
function show(a){ //方法定義的是當傳入壹個下標時，按鈕和圖片做出對的反應
for(i=0;i<btn.length;i++ ){
btn[i].className=''; //很容易看懂吧？每個按鈕都先設置成看不見，然後把當前按鈕設置成可見。
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){ //把圖片的效果設置和按鈕相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//切換按鈕功能，響應對應圖片
for(i=0;i<btn.length;i++){
btn[i].index=i; //不知道妳有沒有發現，循環裏的方法去調用循環裏的變量體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //這就是最後那句話追加的功能
}
}
//自動輪播方法
function autoPlay(){
play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調不到 或者妳可以調用auto.play 也許可以但是沒時間試了
index++;
index>=imgs.length&&(index=0);//可能有優先級問題，所以用了括號，沒時間測試了。
show(index);
},1000)
}
autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之後影響到了其他方法，使用autoPlay所以只能這樣調用了
//div的鼠標移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按鈕下標也要加上相同的鼠標事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。
</script>
</body>
</html>