<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0;
}
body {
background: #999999;
}
p {
margin: 0;
padding: 0;
}
#box1,
#box2,
#box3 {
position: relative;
width: 350px;
border: 10px #fff solid;
height: 480px;
background: #fff url(img/练习2/loader_ico.gif) no-repeat center;
}
#box2 {
position: absolute;
top: 8px;
left: 500px;
}
#box3 {
position: absolute;
top: 8px;
right: 80px;
}
#box1 img,
#box2 img,
#box3 img {
width: 350px;
height: 480px;
}
.bg {
width: 100%;
height: 30px;
background: black;
opacity: 0.5;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.text {
width: 100%;
position: absolute;
text-align: center;
color: white;
}
.list {
list-style: none;
width: 50px;
position: absolute;
right: -70px;
top: 0;
}
.list li {
width: 50px;
height: 50px;
background: #FFFFFF;
margin-bottom: 5px;
}
.yellow {
background: yellow !important;
}
</style>
</head>
<body>
<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>
<div id="box3">
<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 oBox1 = document.getElementById('box1');
var arrImg1 = [
'img/练习2/1.png',
'img/练习2/2.png',
'img/练习2/3.png',
'img/练习2/4.png'
];
var arrText1 = ['雄鹰', '精灵', '美女', '面具'];
tab(oBox1, arrImg1, arrText1);
var oBox2 = document.getElementById('box2')
var arrImg2 = [
'img/练习2/1.jpg',
'img/练习2/2.jpg',
'img/练习2/3.jpg'
];
var arrText2 = ['雄鹰1', '精灵1', '美女1'];
tab(oBox2, arrImg2, arrText2);
var oBox3 = document.getElementById('box3')
var arrImg3 = [
'img/练习2/1.jpg',
'img/练习2/2.jpg',
'img/练习2/3.jpg',
'img/练习2/2.png',
'img/练习2/3.png'
];
var arrText3 = ['雄鹰1', '精灵1', '美女1', 'sadas', 'sadas'];
tab(oBox3, arrImg3, arrText3);
function tab(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;
}
clear();
tab();
}, 1000)
}
setObj();
obj.onmouseover = function() {
clearInterval(this.timer);
}
obj.onmouseout = function() {
setObj();
}
// ================================================
// 创建四个li
for (var i = 0; i < arrImg.length; i++) {
oUl.innerHTML += '<li> </li>';
}
//页面初始化
var num = 0;
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;
//清楚li的className
// oLi.className='';
clear();
tab();
}
}
// 1.清楚所有li classname清空
function clear() {
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
}
}
</script>
</body>
</html>
网友评论