做一个简易的图片切换代码

做一个简易的图片切换代码

网上大佬些的代码我感觉还是对于我这种新手太难了，光看布局就看了好久，我这就写了个自己做的超级简单的纯js代码,

  var i =1;                     //作为一个循环的数
        //通过点击切换
        function qie(number) {            //这个函数是绑定在点击切换的按钮上的onclick
            if(number==1){i--;}       //number是html传入的值，1是向后切换，传入2是向前切换
            if(i<1){i=5;}                                                               
            if(number==2){i++;}
            if(i>5){i=1;}
            document.getElementById('bbb').src=("ima/"+i+".jpg"); 
  //bbb是图片显示位置所在dom节点的id，src后面的是jpg，
  //你放的图片的格式必须都要是一样的，如果是png就改成png就ok了，并且注意！！
  //这里因为用的是数字循环，图片的文件名前缀必须是数字1 2 3 4  5，例如依次是1.jpg，2.jpg...5.jpg
  //代码中只是举了五张图片的例子，想要多加，你得看懂代码再修改
        }
        //通过setInterval自动循环
        setInterval(zhidong,5000);//5s切换一次
        function zhidong() {
            i++;
            if(i>5){i=1;} //循环到最后一张的时候回到起点
            document.getElementById('bbb').src=("ima/"+i+".JPG");
        }

html

<img id="bbb" src="ima/1.jpg"></img>                   //这是放图片的容器的样式，宽高自己定
<button onclick="qie(1)"></button>   //切换按钮
<button onclick="qie(2)"></button>   //切换按钮

可以实现图片的自动切换和点击切换
图片放在html同级目录下的ima文件夹下，并且图片的文件名必须是1.jpg，2.jpg依次的数字，后缀的名也要一样，如果照搬文中代码，图片必须凑满5张

2019.12.24最后修改
虽然一年多的学习有更多先进 的方法
但是依照之前切换方式作出优化，但也就那样吧。。

var s = [
   'aaa.jpg',    //在这个s数组中依次可加入图片的文件名
   'ksksk.png'
]
var i = 0 ;  //循环数
//自动切换
setInterval(()=>{
  i++;
  if(i>s.length-1){i = 0}
  document.getElementById('bbb').src=`ima/${s[i]}`;  //ima是图片路径，可以改的
                            //注意这里用的是反引号取值，不是jq，不要搞错了
}
,5000)

 //通过点击切换
function qie(number) {           
   if(number==1){i--;}       
   if(i<1){i=5;}                                                               
   if(number==2){i++;}
   if(i>5){i=1;}
   document.getElementById('bbb').src=`ima/${s[i]}`
}

新的代码用到原理是一样的，现在的眼光来看，总的来说这种方法不是特别好，图片过大或者网不好我估计会出bug；