<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
body {
background: #333;
}
#pic {
width: 400px;
height: 500px;
position: relative;
margin: 0 auto;
background: url(img/loader_ico.gif) no-repeat center #fff;
}
#pic img {
width: 400px;
height: 500px;
}
#pic ul {
width: 40px;
position: absolute;
top: 0;
right: -50px;
}
#pic li {
width: 40px;
height: 40px;
margin-bottom: 4px;
background: #666;
}
#pic .active {
background: #FC3;
}
#pic span {
top: 0;
}
#pic p {
bottom: 0;
margin: 0;
}
#pic p,
#pic span {
position: absolute;
left: 0;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background: #000;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById(‘pic‘);
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;
for(var i = 0; i < arrUrl.length; i++) {
oUl.innerHTML += ‘<li></li>‘;
}
// 初始化
function fnTab() {
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num + ‘ / ‘ + arrUrl.length;
oP.innerHTML = arrText[num];
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = ‘‘;
}
aLi[num].className = ‘active‘;
}
fnTab();
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i; // 索引值
aLi[i].onclick = function() {
num = this.index;
fnTab();
};
}
};
</script>
</head>
<body>
<div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div>
</body>
</html>
示例代码
时间： 2024-07-28 15:05:18