JS -- 記一種用原生JS 實現輪播圖的方法（非無限循環不自動切換）

實現一個非無限循環不自動切換的輪播圖
只須要幾張圖片和兩個按鈕（簡化）

HTML部分

兩個按鈕，幾張圖片（假若有四張圖）

<span id='s1'>右側按鈕</span>
 <ul id='ul'>
     <li class='active'><img src="img/1.png" alt=""></li>
     <li><img src="img/2.png" alt=""></li>
     <li><img src="img/3.png" alt=""></li>
     <li><img src="img/4.png" alt=""></li>
 </ul>  
 <span id='s2'>左側按鈕</span>

CSS部分

動態添加刪除li的class屬性(native)

span{ cursor: pointer; }
    #s1,#s2{
        position: absolute;
        top: 130px;
    }
    #s1{ right: 0;}
    #s2{ left:0; }
    ul{
        width: 460px; 
        height: 280px;
        margin: auto;
        overflow: hidden;
        }
    li{
        float: left;
        display: none;
        background-color: orange;
    }
    .active{
        background-color: #dddddd;
        display: block;
    }

JS部分

window.onload=function(){
            var index = 0,
                imgs =  document.getElementsByTagName("li");
            s1.onclick = function(e){
               index++;
               if(index >= imgs.length){
                    imgs[imgs.length-1].setAttribute("class", "active");
                    alert("已經是最後一張圖")
                    return index = imgs.length-1;;
                }else{
                    imgs[index-1].removeAttribute("class");
                    imgs[index].setAttribute("class", "active");
                    return index;
                }
            }
            
            s2.onclick=function(){
                if(index>0){
                    imgs[index].removeAttribute("class");
                    imgs[index-1].setAttribute("class", "active");
                    index--;
                    return index-1;
                }else{
                    imgs[0].setAttribute("class", "active");
                    alert("這是第一張圖")
                    return index = 0;
                }
            }
        }