js实现图片轮播

DOM0级和DOM2级区别

DOM1：只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉
DOM2：可以给某一元素的同一行为绑定多个不同的方法
非IE浏览器监听方法：addEventListener()和removeEventListener()
IE浏览器监听方法：attachEvent()和detachEvent()

两种方法封装，实现兼容

function addHandler(element,type,handler) {
    if(element.addEventListener){
        element.addEventListener(type,handler,true);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler);
    }else{
        elememt["on"+type] = handler;
    }
}

轮播图设计理念

1. 声明变量（索引）
2. 按钮添加事件
3. 圆点添加事件
   注：通过递增、递减，修改索引实现轮播

切换图片

function changeImg() {
    for(var i = 0 ; i<size ; i++){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    pics[index].style.display = "block";
    dots[index].className = "active";
}

按钮切换图片

//点击下一张按钮显示下一张图片
addHandler(next,"click",function () {
    index++;
    if(index>=size) index = 0;
    changeImg();
})
//点击上一张按钮显示上一张图片
addHandler(prev,"click",function () {
    index--;
    if(index<0) index = size-1;
    changeImg();
})

点击圆点索引切换图片

for(var d = 0 ; d<size ; d++){
    dots[d].setAttribute("data-id",d);
    addHandler(dots[d],"click",function () {
        index = this.getAttribute("data-id");
        changeImg();
    })
}

二级菜单设计

1. 获取所有一级菜单
2. 遍历菜单
3. 添加事件
4. 显示子菜单
   注：添加事件实现css属性改变以实现

自动轮播

function startAutoPlay() {
    timer = setInterval(function () {
        index++;
        if(index >= size) index = 0;
        changeImg();
    },3000)
}

遍历

for(var m = 0, mlen = menuItems.length ; m<mlen ; m++){
    menuItems[m].setAttribute("data-index",m);
    addHandler(menuItems[m],"mouseover",function () {
        //显示子菜单背景
        subMenu.className = "sub-menu";
        //获取当前菜单索引
        idx = this.getAttribute("data-index");
        //遍历所有innerBox，隐藏
        for(var j = 0, jlen = innerBox.length ; j<jlen ; j++){
            innerBox[j].style.display = "none";
            menuItems[j].style.background = "none";
        }
        //找到当前子菜单，显示
        innerBox[idx].style.display = "block";
        menuItems[idx].style.background = "rgba(0,0,0,0.1)";
    })
}

鼠标事件

//鼠标离开bannner，隐藏子菜单
addHandler(banner,"mouseout",function () {
    subMenu.className = "sub-menu hide";
})
//鼠标离开主菜单，不隐藏子菜单
addHandler(menuContent,"mouseout",function () {
    subMenu.className = "sub-menu hide";
})
//鼠标划入子菜单，子菜单显示
addHandler(subMenu,"mouseover",function () {
    this.className = "sub-menu";
})
//鼠标划入子菜单，子菜单显示
addHandler(subMenu,"mouseout",function () {
    this.className = "sub-menu hide";
})
//鼠标划入main，停止轮播
addHandler(main,"mouseover",stopAutoPlay);
//鼠标离开main, 继续轮播
addHandler(main,"mouseout",startAutoPlay);