排行榜 统计
  • 文章总数:118 篇
  • 评论总数:47 条
  • 分类总数:10 个
  • 最后更新:8月4日
原创JS

原生js实现banner

本文阅读 2 分钟
首页 JS 正文

08929-kitnfbglwg.png

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);
原创文章,作者:zbwyfkx,如若转载,请注明出处:https://www.fenkexie.cn/archives/52/
-- 展开阅读全文 --
20 新生入学宝典(完整版)
« 上一篇 08-06
低调神秘的山西高校:中北大学
下一篇 » 08-07

发表评论

发表评论

作者信息

动态快讯

    请配置好页面缩略名选项

热门文章

标签TAG

热评文章