目标：使图片切换的时候提示当前在第几张，一共有几张
第一步：获取id=info的元素节点
<div>
<div id="info"></div>
<button id="pre">上一张</button>
<img src="img/1.jpeg"/>
<button id="next">下一张</button>
</div>
<script>
var info=get.documentElementById("info");
</script>
第二步：设置提示文字；
info.innerHTML="当前第1张，共3张"；
20181108080847.png
第三步：改造代码，使提示文字动态显示共几张和在第几张，图片的总共张数可以通过imgList.length方式获得，但是当前第几张并不是index ，因为index初始值等于0，所以index+1，而"当前第"+index+1+"张"会造成直接拼串，所以应该这样写：
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"；
第四步：调整代码，图片提示就动态显示出来了，但是 当点击下一张/上一张时，提示文字并不会被改变，原因是以上代码作没有随着按钮点击被执行，所以在onclick事件中加入以上代码：
pre.onclick =function (){
index-- ;
if(index<0){
index =imgList.length -1;
}
img.src =imgList[index];
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"
}
next.onclick =function (){
index++;
if(index>imgList.length -1){
index=0
}
img.src =imgList[index];
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"
}
完整代码：
window.onload =function() {
//获取图片元素
var img =document.getElementsByTagName("img")[0];
// alert("img")
var imgList=["img/1.jpeg","img/2.jpeg","img/3.jpeg"];
console.log(imgList)
var index =0;
// 获取info 元素节点
var info =document.getElementById("info");
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"
// 获取按钮元素
var pre =document.getElementById("pre");
var next =document.getElementById("next");
pre.onclick =function (){
index-- ;
if(index<0){
index =imgList.length -1;
}
img.src =imgList[index];
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"
}
next.onclick =function (){
index++;
if(index>imgList.length -1){
index=0
}
img.src =imgList[index];
info.innerHTML="当前第"+(index+1)+"张，共"+imgList.length+"张"
}
}
</script>
</head>
<body>
<div>
<div id="info"></div>
<button id="pre">上一张</button>
<img src="img/1.jpeg"/>
<button id="next">下一张</button>
</div>
</body>
网友评论