目标：实现点击上一张/下一张图片循环切换
20181107075238.png
第一步：
将图片存在项目中img文件夹中，初步实现按钮和第一张显示
<div>
<button id="prev">上一张</button>
<img src="img/1.jpeg">
<button id="next">下一张</button>
</div>
第二步：
通过获取标签元素和id元素节点，给按钮加鼠标单击响应事件;将图片存在数组中（后续将利用索引实现图片切换）
<head>
<script>
window.onload=function () {
var img =document.getElementByTagName("img")[0];
var imgList=["img/1.jpeg","img/2.jpeg","img/3.jpeg"];
var index = 0; //给index 一个默认值
var prev =document.getElementById("pre");
prev.onclick=function(){
}
var next =document.getElementById("next");
next.onclick=function(){
}
}
</script>
<head>
getElementByTagName获取到的是一个数组集合形式，（alert("img")弹出的是[Object HTML Collection]）所以加个索引
var img =document.getElementByTagName("img")[0];
第三步：
切换图片实际上是切换图片src=“”
var prev =document.getElementById("pre");
prev.onclick=function(){
index--;
img src= imgList[index];
}
var next =document.getElementById("next");
next.onclick=function(){
index++;
img src= imgList[index]
}
20181107073312.png
如图，当图片在最后一张或者第一张时，分别再点击上一张或者下一张时img=“undefined”,不能够实现循环显示图片的目的；
第四步：
即当 index=0，index=3时， index--， index=-1很显然就超出了imgList中元素最小和最大索引的范围，所以加if语句控制索引范围
var prev =document.getElementById("pre");
prev.onclick=function(){
index--;
if（ index<0）{
index =imgList.length -1;
}
img src= imgList[index];
}
var next =document.getElementById("next");
next.onclick=function(){
index++;
if(index<imgList.length -1){
index=0
}
img src= imgList[index]
}
以上if语句的意思是，点击上一张直到index=0 也就是第一张图片， 也就是说 index--<0时 ， 让index =imgList.length -1;当到图片第一张的时候再点击上一张，那么显示最后一张；同理
if(index<imgList.length -1){
index=0
}
意思是 当点击下一张直到图片最后一张的时候， index=0重新回到图片的第一张。
完整代码
<script>
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;
// 获取按钮元素
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];
}
next.onclick =function (){
index++;
if(index>imgList.length -1){
index=0
}
img.src =imgList[index];
}
}
</script>
</head>
<body>
<div>
<button id="pre">上一张</button>
<img src="img/1.jpeg"/>
<button id="next">下一张</button>
</div>
网友评论