<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡自动切换</title>
<style>
body{ background: #fff; font: 14/1.4 "Microsoft Yahei";}
ul{ padding: 0; margin: 0;}
li{ list-style: none;}
#box{ width: 400px; height: 300px; margin: 0 auto; background: #eee url(img/loader_ico.gif) no-repeat center; position: relative; }
#box img{ width: 400px; height: 300px;}
#box ul{ position: absolute;}
#box li{ float: left; margin-right: 10px; width: 40px; height: 40px; margin-bottom: 5px; background: #ccc; cursor: pointer;}
#box li.active{ background: #f60;}
#box p ,#box span{ position: absolute; left: 0; width: 400px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: rgba(0,0,0,.4);}
#box span{ top: 0;}
#box p{ bottom: 0; margin: 0;}
</style>
</head>
<body>
<div id="box">
<img src="" alt="">
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul>
</ul>
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('box');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png'];
var arrText = ['图片一','图片二','图片三','图片四'];
var num = 0;
var timer = null;
// 动态创建生成所有的li
for (var i = 0; i < arrUrl.length; i++) {
oUl.innerHTML += '<li></li>'
};
// 初始化
function init(){
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num + '/' + arrUrl.length;
oP.innerHTML = arrText[num];
// 清空所有li的class，当前添加class
for(var i = 0; i < arrUrl.length; i++){
aLi[i].className = '';
}
aLi[num].className = 'active';
};
// 函数调用
init();
// 点击切换图片
for(var i = 0; i < aLi.length; i++){
aLi[i].index = i;
aLi[i].onclick = function(){
// 将当前索引赋给num
num = this.index;
init();
};
}
// 自动播放函数
function autoPlay(){
// 通过定时器改变num实现循环播放
timer = setInterval(function(){
num ++;
num %= arrUrl.length;
init();
},2000);
};
// 函数调用，立即自动播放
autoPlay();
// 设置一个定时器，2s后自动播放
// setTimeout(autoPlay,2000);
// 鼠标移入，清空定时器
oDiv.onmouseover = function(){
clearInterval(timer);
};
// 鼠标移开，开启定时器，再次自动播放
oDiv.onmouseout = function(){
autoPlay();
};
};
</script>
</body>
</html>
