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;
}
}
轮播图设计理念
- 声明变量(索引)
- 按钮添加事件
- 圆点添加事件
注:通过递增、递减,修改索引实现轮播
切换图片
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();
})
}
二级菜单设计
- 获取所有一级菜单
- 遍历菜单
- 添加事件
- 显示子菜单
注:添加事件实现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);
原创文章,作者:zbwyfkx,如若转载,请注明出处:https://www.fenkexie.cn/archives/52/