JS切换图片

今天在学习到JS特效切换图片时，遇到了很多问题：

首先我的思路是这样的：

1. 设置监听事件，onclick
2. 由于要实现循环切换，就意味着在临界值处要进行其他的处理和判断
3. 非临界值时，进行正常的加减操作

然后我就开始碰到问题

1、无论怎么样点击按钮，图片只会跳到下一张，而不会循环

\\ 错误代码

pre.onclick = function () {
if(current===min)
{
        img.setAttribute("src","图片/"+max+".jpg");
}else{
        img.setAttribute("src","图片/"+(current-1)+".jpg");
}
};
next.onclick = function () {
if (current===max)
{
        current=1;
        img.setAttribute("src","图片/"+min+".jpg");
}else
{
        img.setAttribute("src","图片/"+(current+1)+".jpg");
}
    console.log(current);
};

错误代码示范 \\\\\

起初我想到的是，数字每一次的更新。想法是，每次点击之后current的值是不是都会变回1，从而导致图片显示错误。
于是我写了这么一串代码：

||||| 错误代码示范

 pre.onclick = function () {
 /*current初始值就是1*/
  if(current===min)   
     {        
       img.setAttribute("src","图片/"+max+".jpg");    
     }else{      
       img.setAttribute("src","图片/"+(current-1)+".jpg");    
      }   
  console.log(current); 
  }; 

错误代码示范 ||||

然后发现current的值始终为1，我貌似证实了我的想法？好像的确是因为数据的更新出错了。

但是我错了。在看学习视频的时候、讲述了正确的切换方式,代码如下：

|||||| 正确代码示范

var min=1;
var max=10;
var current=min;
pre.onclick = function () {
     if(current===min)
     {
         current=max;
     }else{
        current--;
     }
     img.setAttribute("src","图片/"+current+".jpg");
 }
 next.onclick = function () {
     if (current===max)
     {
         current=min;
     }else
     {
         current++;
     }
     img.setAttribute("src","图片/"+current+".jpg");
 }

正确代码示范 ||||

代码可以实现切换图片的效果，我更糊涂了。又开始思考之前的代码为什么出错。我就是想在每一个 if 和 else 里面用setAttribute。

我开始想、是不是因为我没有自加自减操作而影响了图片切换，我开始更换代码：
||||||||| 正确代码示范

pre.onclick = function () {
if(current===min)
{
        img.setAttribute("src","图片/"+max+".jpg");
}else{   
        current=current-1;
        img.setAttribute("src","图片/"+(current)+".jpg");
}
};
next.onclick = function () {
if (current===max)
{
        current=1;
        img.setAttribute("src","图片/"+min+".jpg");
}else
{
	current=current+1;
        img.setAttribute("src","图片/"+(current)+".jpg");
}
    console.log(current);
};

正确代码示范 ||||

这一次图片切换成功了。我意识到可以排除自加自减对操作的影响，也实现了在每一个 if 和 else 里面用setAttribute。

但是我发现在前面setAttribute函数的value值中都进行了加减法的操作，但是这里没有。我开始胡扯，是不是因为这个函数value处不可以运算符计算。我查了百度翻了书都没说什么。那我知道，绝对是value值错了。

于是我写了一段小代码，来检验setAttribute函数的作用：

||||| 检验代码

next.onclick = function () {
    current=current+1;
    console.log("图片/" + current + 1 + ".jpg");
    img.setAttribute("src","图片/"+current+1+".jpg");
}

输出：图片/11.jpg

检验代码 ||||||

哦我瞬间明白了，这里的<“+">号.起连接字符的作用。

最初错误的原因是：

1. 没想到+号在这里是连接运算符的作用
2. 固定的思维认为在前面是连接的作用，在后面可以自己的进行加减法的操作