效果:
HTML结构:
<div id="pic" class="pic">
<img />
<span>图片加载中...</span>
<p>文本加载中...</p>
<ul>
<!--JavaScript生成li-->
</ul>
<a href="javascript:;" class="btn next">></a>
<a href="javascript:;" class="btn prev"><</a>
</div>
CSS样式:
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑";
font-size: 14px;
color: #555;
}
.pic{
width: 420px;
height: 530px;
margin: 20px auto;
position: relative;
border: 1px solid #EEEEEE;
}
.pic img{
width: 420px;
height: 530px;
}
.pic span{
position: absolute;
top: 0px;
}
.pic p{
position: absolute;
bottom: 0px;
}
.pic span,.pic p{
width: 420px;
height: 40px;
background: rgba(0,0,0,0.55);
text-align: center;
line-height: 40px;
color: #fff;
}
.btn{
position: absolute;
width: 40px;
height: 40px;
color: #fff;
text-align:center;
line-height: 40px;
top: 265px;
background: rgba(0,0,0,0.55);
}
.prev{
left: 0;
}
.next{
right: 0;
}
.pic ul {
position: absolute;
width: 40px;
top: 0;
right: -50px;
}
.pic ul li{
width: 40px;
height: 40px;
border: 1px solid #ddd;
}
.active{
background: rgba(0,0,0,0.55);
}
</style>
JavaScript代码:
<script>
var oPic = document.getElementById("pic");
var oImg = oPic.getElementsByTagName("img")[0];
var oSpan = oPic.getElementsByTagName("span")[0];
var oP = oPic.getElementsByTagName("p")[0];
var oUl = oPic.getElementsByTagName("ul")[0];
var oLi = oPic.getElementsByTagName("li");
var oA = oPic.getElementsByTagName("a");
var arrImg = ["img/1.png","img/2.png","img/3.png","img/4.png"];
var arrTxt = ["图片1","图片2","图片3","图片4"];
var num = 0 ;
//初始化
oSpan.innerHTML = (num+1)+"/"+4;
oP.innerHTML = arrTxt[num];
oImg.src = arrImg[num];
for (var i = 0 ; i<arrImg.length ; i++) {
oUl.innerHTML+="<li></li>";
}
oLi[num].className = "active";
//下一张
oA[0].onclick = function(){
num++ ;
if(num>arrImg.length-1){
num = 0;
}
oSpan.innerHTML = (num+1)+"/"+4;
oP.innerHTML = arrTxt[num];
oImg.src = arrImg[num];
for (var i = 0 ; i<oLi.length ; i++) {
oLi[i].className = "";
}
oLi[num].className = "active";
}
//上一张
oA[1].onclick = function(){
num-- ;
if(num<0){
num = arrImg.length-1;
}
oSpan.innerHTML = (num+1)+"/"+4;
oP.innerHTML = arrTxt[num];
oImg.src = arrImg[num];
for (var i = 0 ; i<oLi.length ; i++) {
oLi[i].className = "";
}
oLi[num].className = "active";
}
//图片与侧栏关联
for (var i = 0 ; i<oLi.length ; i++) {
oLi[i].index = i ;
oLi[i].onclick = function(){
for (var j = 0 ; j<oLi.length;j++) {
oLi[j].className = "";
}
this.className = "active";
num = this.index
oSpan.innerHTML = (this.index+1)+"/"+4;
oP.innerHTML = arrTxt[this.index];
oImg.src = arrImg[this.index];
}
}
</script>
扫描二维码关注公众号,回复:
11281716 查看本文章