js 輪播效果

    <!--圖片輪播      Start-->
                    <div class="pics-ul">
                        <div class="pics-ulleft">                            
                            <ul id="allImg">
                                <li><img src="img/img01.png"/></li>    
                                <li><img src="img/img2.jpg"/></li>    
                                <li><img src="img/img1.jpg"/></li>    
                                <li><img src="img/img3.jpg"/></li>    
                                <li><img src="img/img4.jpg"/></li>    
                            </ul>
                            <a name="btn" id="prev" class="prev" style="display: block;"></a>
                            <a name="btn" id="next" class="next" style="display: block;"></a>
                            <ul id="btn" class="pagination">
                                 <li class="hover"><a href="#0">1</a></li>
                                 <li><a href="#1">2</a></li>
                                 <li><a href="#2">3</a></li>
                                 <li><a href="#3">4</a></li>
                                 <li><a href="#4">5</a></li>
                            </ul>
                        </div>
                        <div class="pics-ulright"><img src="img/imgright.png"/></div>
                    </div>
                <!--圖片輪播      End-->   

/*圖片輪播*/
var but1 = document.getElementById("prev");
var abtn = document.getElementById("btn").getElementsByTagName("li"); //獲取所有的按鈕

var lis = document.getElementById('allImg').getElementsByTagName('li');
var but2 = document.getElementById("next");
var index = 0;
var timer = null;
but2.onclick = function() {

    index++;
    if (index > lis.length - 1) {
        index = 0;
    }
    setImg(index);

}
but1.onclick = function() {
    index--;
    if (index < 0) {
        index = lis.length - 1;
    }
    setImg(index);

}


function changeImg() {
    if (index == lis.length - 1) { //當到最後一張圖片時
        index = 0
    } else {
        index++; //圖片索引發生改變
    }
    setImg(index);
}

function setImg(index) {
    for (j = 0; j < lis.length; j++) {
        lis[j].style.display = "none";
    }

    lis[index].style.display = "block";
    //按鈕的樣式要與圖片對應
    for (var i = 0; i < abtn.length; i++) {
        abtn[i].className = ""
    }
    abtn[index].className = "hover";
}

//自動切換
timer = setInterval(changeImg, 3000);

//按鈕
for (var i = 0; i < abtn.length; i++) {
    (function() {
        var p = i
        abtn[p].onclick = function() {
            index = p;
            setImg(index);
        }

    })();



}