<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: #5C5C5C;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
p{
margin: 0;
}
#box,#box1,#box2{
width: 390px;
border: 10px solid #F3F3F3;
position: relative;
background: #F3F3F3 url(img/loader_ico.gif) no-repeat center center;
}
#box1{
position: absolute;
left:500px;
top:8px;
}
#box2{
position: absolute;
left:1000px;
top:8px;
}
#box img{
width: 390px;
height: 480px;
}
#box1 img{
width: 390px;
height: 480px;
}
#box2 img{
width: 390px;
height: 480px;
}
.bg{
width: 100%;
height: 30px;
background: #000000;
opacity: 0.5;
position: absolute;
}
.top{
top: 0;
}
.bottom{
bottom: 0;
}
.text{
width: 100%;
line-height: 30px;
text-align: center;
color: #fff;
font-weight: bold;
position: absolute;
}
.list{
width: 50px;
position: absolute;
right: -70px;
top: -10px;
}
.list li{
width: 50px;
height: 50px;
background: #FFFFFF;
margin-bottom: 5px;
cursor: pointer;
}
.yellow{
background: #FF5722 !important;
}
</style>
</head>
<body>
<div id="box">
<img src= alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载</p>
<p class="text bottom">图片数量正在计算</p>
<ul class="list"></ul>
</div>
<div id="box1">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<div id="box2">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var arrImg1 = [
'img/1.png',
'img/2.png',
'img/3.png',
'img/4.png'
];
var arrImg2 = [
'img/1.png',
'img/2.png',
'img/3.png'
];
var arrImg3 = [
'img/1.png',
'img/2.png',
'img/3.png',
'img/4.png',
'img/2.png'
];
var arrText1 = ['雄鹰','精灵','美女','面具'];
var arrText2 = ['哈哈','呵呵','啊啊'];
var arrText3 = ['dfsdf','fasfsaf','wfaf','sdasd','sfasfa'];
change(oBox,arrImg1,arrText1);
change(oBox1,arrImg2,arrText2);
change(oBox2,arrImg3,arrText3);
function change(obj,arrImg,arrText){
var oImg = obj.getElementsByTagName('img')[0];
var oText = obj.getElementsByTagName('p')[2];
var oNum = obj.getElementsByTagName('p')[3];
var oUl = obj.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var num = 0;
// -------------------------------------添加定时器
function setObj(){
obj.timer = setInterval(function(){
num++;
if(num >= arrImg.length){
num = 0;
}
clearClass();
tab();
},1000);
}
setObj();
obj.onmouseover = function(){
clearInterval(this.timer);
}
obj.onmouseout = function(){
setObj();
}
// ----------------------------------------
// 第二种同步方式,利用变量,这个oLi专门保存激活的li元素
// var oLi = null;
// 加载li
for(var i = 0;i < arrImg.length;i++){
oUl.innerHTML += '<li></li>';
}
// 页面初始化
function tab(){
oImg.src = arrImg[num];
oText.innerHTML = arrText[num];
oNum.innerHTML = num + 1 + '/' + arrImg.length;
// 确定激活的li
aLi[num].className = 'yellow';
// 保存激活的li
// oLi = aLi[num];
}
tab();
// 给li加点击
for(var i = 0;i < aLi.length;i++){
// 自定义属性,索引
aLi[i].index = i;
aLi[i].onclick = function(){
num = this.index;
// oLi.className = '';
clearClass();
tab();
}
}
// 第一种同步方式,将所有li的className清空
function clearClass(){
for(var i = 0;i < aLi.length;i++){
aLi[i].className = '';
}
}
}
</script>
</body>
</html>
