效果如图：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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;
}
.btn {
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 250px;
text-align: center;
line-height: 24px;
text-decoration: none;
color: #fff;
}
.pic .next {
right: 0;
}
</style>
</head>
<body>
<div id="pic" class="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
<a href="javascript:;" class="btn next">></a>
<a href="javascript:;" class="btn prev"><</a>
</div>
<script>
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 oLi=oUl.getElementsByTagName("li")
var oA=oDiv.getElementsByTagName("a")
/*定义数组begin*/
var num=0
var arrImg=["img/1.png","img/2.png","img/3.png","img/4.png"]
var arrTex=["图片1","图片2","图片3","图片4"]
/*定义数组end*/
/*初始化展示begin*/
oImg.src=arrImg[0]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[0]
/*初始化展示end*/
/*点击下一张切换begin*/
oA[0].onclick=function(){
num++
if(num>arrImg.length-1){
num=0
}
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]
for (var i=0;i<oLi.length;i++) {
oLi[i].className=""
}
oLi[num].className="active"
}
/*点击下一张切换end*/
/*点击上一张切换begin*/
oA[1].onclick=function(){
num--
if(num<0){
num=arrImg.length-1
}
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]
for (var i=0;i<oLi.length;i++) {
oLi[i].className=""
}
oLi[num].className="active"
}
/*点击下一张切换end*/
/*for循环拼接生成li begin*/
for ( var i=0;i<arrImg.length;i++) {
oUl.innerHTML+="<li></li>"
}
/*for循环拼接生成li end*/
oLi[0].className="active"
/*点击当前li关联图片下标 begin*/
for ( var i=0;i<oLi.length;i++) {
oLi[i].index=i
oLi[i].onclick=function(){
for ( var i=0;i<oLi.length;i++) {
oLi[i].className=""
}
this.className="active"
num=this.index
oImg.src=arrImg[num]
oSpan.innerHTML=(num+1)+"/"+arrImg.length
oP.innerHTML=arrTex[num]
}
}
/*点击当前li关联图片下标 begin*/
</script>
</body>
</html>