这是实现图片转换的js代码，想要弄明白具体实现流程

var pics = document.getElementById("pics");
var images = pics.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
function init(index){
for(i=index;i<button.length;i++){
mouseOverSwitchPic(i);
}
}

function mouseOverSwitchPic(i){
    var picIndex=i;
    button[i].onmouseover=function change(){
    for(j=0;j<this.parentNode.childNodes.length;j++){
        this.parentNode.childNodes[j].className="";
    }
    this.className="current";
    for(m=0;m<images.length;m++){
        images[m].className="";
        if (m==picIndex){
            images[m].className="show"; 
        }
    }
    }
}
init(0);    

function mouseOverSwitchPic(i) { //传一个下标 i
        var picIndex = i; //声明picIndex赋值为 传进来的i
        button[i].onmouseover = function change() { //button是一个按钮数组 [i]就是第i个的onmouseover事件
            for (j = 0; j < this.parentNode.childNodes.length; j++) { //for循环 this是指button[i] ,parentNode就是父元素，childNodes子元素合集，一起就是button[i]的父元素下的所有子元素（是一个dom数组，伪数组）
                this.parentNode.childNodes[j].className = ""; //button[i]的父元素下的所有子元素（是一个dom数组，伪数组）的class=""
            }
            this.className = "current"; //给当前的dom加上类名current ,this就是button[i]
            for (m = 0; m < images.length; m++) { //获取所有图片（是一个数组，然后遍历）
                images[m].className = ""; //给每个图片的类名清空
                if (m == picIndex) { //当图片的下标==传进来的下标 就让其图片的clasname=show。意思就是点击按钮，显示其对应得图片显示
                    images[m].className = "show";
                }
            }
        }
    }