···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
#play_box{
position: relative;
width: 670px;
height: 240px;
border: 1px solid #ccc;
}
#play_box img{
display: none;
}
#play_box img.current{
display: block;
}
#iconlist{
position: absolute;
bottom: 10px;
right: 20px;
}
#iconlist li{
float: left;
margin-left: 5px;
width: 26px;
height: 26px;
color: #fff;
text-align: center;
line-height: 26px;
background: #999;
border-radius: 13px;
cursor: pointer;
}
#iconlist li.current{
background: red;
}
</style>
</head>
<body>
<h1>輪播圖</h1>
<div id="play_box">
<div class="imagelist">
</div>
<div id="iconlist">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script>
//獲取所以圖片的一個集合
var play_box=document.getElementById('play_box');
var images = play_box.getElementsByTagName('img');
var iconlist = play_box.getElementsByTagName('li');
var timer = setInterval(run,1000);
var m = 1; //定義循環(huán)變量
//循環(huán)函數(shù)
function run(){
if(m > 4){
m = 0;
}
//控制圖片的變換
controImage(m);
//控制按鈕變換
controIcon(m);
m++;
}
//定義函數(shù) 控制圖片變化
function controImage(n){
//所有的圖片隱藏
//第n個圖片顯示
for(var i = 0;i<images.length; i++){
images[i].className = '';
}
images[n].className = 'current';
}
//定義函數(shù) 控制按鈕變換
function controIcon(n){
//所以按鈕變灰
//第n個按鈕變紅
for(var i = 0 ;i <iconlist.length;i++){
iconlist[i].className = '';
}
iconlist[n].className ='current';
}
//鼠標滑過 定時停止
play_box.onmouseover = function(){
clearInterval(timer);
}
//鼠標移走 繼續(xù)定時
play_box.onmouseout = function (){
timer = setInterval(run,1000);
}
//給按鈕綁定 鼠標滑過事件
for(var i = 0;i <iconlist.length; i++){
(function(i){
iconlist[i].onmouseover = function(){
controIcon(i);
controImage(i);
m = i +1;
}
})(i)
}
</script>
</body>
</html>
···
