javascript学习笔记--图片切换（一）

目标：实现点击上一张/下一张图片循环切换

20181107075238.png

第一步：
将图片存在项目中img文件夹中，初步实现按钮和第一张显示

  

      上一张
        
      下一张
  

第二步：
通过获取标签元素和id元素节点，给按钮加鼠标单击响应事件;将图片存在数组中（后续将利用索引实现图片切换）

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

以上if语句的意思是，点击上一张直到index=0 也就是第一张图片， 也就是说 index--<0时 ， 让index =imgList.length -1;当到图片第一张的时候再点击上一张，那么显示最后一张；同理

 if(index

意思是 当点击下一张直到图片最后一张的时候， index=0重新回到图片的第一张。

完整代码

 



    上一张
    
    下一张