html代码
<div id="pic">
<img src="" alt="" />
<p>正在加载中...</p>
<span>数量正在加载中...</span>
<ul></ul>
</div>
CSS代码
ul, p {
margin: 0;
padding: 0;
}
body{
background: #333;
}
li{
list-style: none;
width: 40px;
height: 40px;
margin-bottom: 10px;
background: #000;
}
.active{
background: #c6f6f6;
}
#pic{
width: 390px;
height: 480px;
margin: 30px auto 0;
background: #fff url(img/img/loader_ico.gif) no-repeat center;
position: relative;
}
ul{
position: absolute;
top: 10px;
left: 400px;
}
img{
width: 390px;
height: 480px;
}
p, span{
width: 390px;
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: center;
background: #000;
filter: (opacity: 60);
opacity: 0.6;
position: absolute;
left: 0;
}
p{
bottom: 0;
}
span{
top: 0;
}
JavaScript代码
window.onload = function (){ // 要是写上面 就要写上window.onload
//不然他妈的读不到下面的数据啊
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var arrUrl = ['img/img/1.png','img/img/2.png','img/img/3.png','img/img/4.png'];
var arrText = ['Image 1','Image 2','Image 3','Image 4'];
var num = 0;
var oldLi = null;
/* 初始化 */
oSpan.innerHTML = 1 + num + '/' + arrUrl.length;
oP.innerHTML = arrText[num];
oImg.src = arrUrl[num];
for(var i=0; i<arrUrl.length; i++){ //添加四个元素 多个元素就要用for循环
oUl.innerHTML += '<li></li>';
}
oldLi = aLi[0];
aLi[num].className = 'active';
/* 初始化完成 */
for(var i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].onclick = function (){
oImg.src = arrUrl[this.index];
oP.innerHTML = arrText[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oldLi.className = '';
oldLi = this;
this.className = 'active';
};
}
};
其中li
的 active
思路是 oldLi
存放上一个 active
, 清空上一个, 然后给当前的 li
加上 className