原生JS实现图片轮播及二级菜单的绑定

2020-03-05 本文已影响0人梁文璇

我们在各个电商网站上都可以看到图片轮播，当然框架实现的话，想必对大家来说是 so easy 的，那么该如何用原生JS来实现呢？请开始我的show~~~

动起来

做出来的效果是这样滴

HTML

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

<a href="">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

CSS样式

*{margin:0;padding:0;}

@font-face {font-family: 'iconfont';

src: url('../img/font/iconfont.eot');

src: url('../img/font/iconfont.eot') format('embedded-opentype'),

url('../img/font/iconfont.woff') format('woff'),

url('../img/font/iconfont.ttf') format('truetype'),

url('../img/font/iconfont.svg#iconfont') format('svg');}

a{text-decoration: none;}

a:link,a:visited{color:#5e5e5e;}

body{font-family:"微软雅黑";color: #14191e;}

.main{width:1200px;height:460px;margin:30px auto;position:relative;overflow:hidden}

.banner{width:1200px;height:460px;overflow:hidden;position:relative}

.banner-slide{width:1200px;height:460px;background-repeat:no-repeat;float:left;display:none}

.slide-active{display:block}

.slide1{background-image:url(../img/bg1.jpg);}

.slide2{background-image:url(../img/bg2.jpg);}

.slide3{background-image:url(../img/bg3.jpg);}

.button{position: absolute;transform:rotate(180deg);top: 50%;left: 244px;height: 80px;width: 40px;margin-top:-40px;background:url(../img/arrow.png) center center no-repeat;}

.next{transform:rotate(0deg);left:auto;right:0;}

.button:hover{background-color:#333;opacity: 0.8;filter:alpha(opacity=80);}

.dots {position: absolute;bottom: 24px;right: 0;text-align: right;padding-right: 24px;line-height: 12px;}

.dots span {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-left: 8px;background-color: rgba(7, 17, 27, 0.4);cursor: pointer;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;}

.dots span.active{box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;background-color: #ffffff;}

/* menu-box */

.menu-box {background:rgba(7, 17, 27, 0.5);opacity: 0.5;position: absolute;left: 0px;top: 0px;width: 244px;height: 460px;z-index: 1;}

.menu-content{position: absolute;left: 0px;top: 0px;width: 244px;height: 460px;z-index: 2;padding-top: 6px}

.menu-item{height: 64px;line-height: 66px;font-size: 12px;cursor: pointer;padding: 0 24px;position: relative}

.menu-item a{display: block;color: #fff;padding: 0 8px;border-bottom: 1px solid rgba(255, 255, 255, 0.2);height: 63px;font-size:16px}

.menu-item:last-child a{border-bottom:none}

.menu-item i{position: absolute;right: 32px;top: 24px;color: rgba(255,255,255,0.5);font-size: 24px;top: 2px;font-style:normal;font-weight:normal;font-family:"iconfont";}

.sub-menu {border:1px solid #d9dde1;background:#fff;position: absolute;left: 244px;top: 0px;width: 730px;height: 458px;z-index: 581;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);}

.hide{display:none;}

.inner-box{width:100%;height:100%;background:url(../img/fe.png) no-repeat;display:none;}

.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;}

.title{color: #f01414;font-size: 16px;line-height: 16px;margin-top: 28px;font-weight: bold;margin-bottom: 30px;}

.sub-row{margin-bottom:25px;}

.bold{font-weight:700;}

.mr10{margin-right:10px;}

.ml10{margin-left:10px;}

JS代码

var timer = null,

index = 0,

pics = byId("banner").getElementsByTagName("div"),

dots = byId("dots").getElementsByTagName("span"),

size = pics.length,

prev = byId("prev"),

next = byId("next"),

menuItems = byId("menu-content").getElementsByTagName("div"),

subMenu = byId("sub-menu"),

subItems = subMenu.getElementsByClassName("inner-box");

function addHandler(element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, true);

}

else if (element.attachEvent) {

element.attachEvent('on' + type, handler);

}

else {

element['on' + type] = handler;

}

function byId(id){

return typeof(id)==="string"?document.getElementById(id):id;

}

// 清除定时器,停止自动播放

function stopAutoPlay(){

if(timer){

clearInterval(timer);

}

// 图片自动轮播

function startAutoPlay(){

timer = setInterval(function(){

index++;

if(index >= size){

index = 0;

}

changeImg();

},3000)

}

function changeImg(){

for(var i=0,len=dots.length;i<len;i++){

dots[i].className = "";

pics[i].style.display = "none";

}

dots[index].className = "active";

pics[index].style.display = "block";

}

function slideImg(){

startAutoPlay();

var main = byId("main");

var banner = byId("banner");

var menuContent = byId("menu-content");

addHandler(main,"mouseover",stopAutoPlay);

addHandler(main,"mouseout",startAutoPlay);

// 点击导航切换

for(var i=0,len=dots.length;i<len;i++){

dots[i].id = i;

addHandler(dots[i],"click",function(){

index = this.id;

changeImg();

})

}

// 下一张

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 m=0,mlen=menuItems.length;m<mlen;m++){

menuItems[m].setAttribute("data-index",m);

addHandler(menuItems[m],"mouseover",function(){

subMenu.className = "sub-menu";

var idx = this.getAttribute("data-index");

for(var j=0,jlen=subItems.length;j<jlen;j++){

subItems[j].style.display = 'none';

menuItems[j].style.background = "none";

}

subItems[idx].style.display = "block";

menuItems[idx].style.background = "rgba(0,0,0,0.1)";

});

}

addHandler(subMenu,"mouseover",function(){

this.className = "sub-menu";

});

addHandler(subMenu,"mouseout",function(){

this.className = "sub-menu hide";

});

addHandler(banner,"mouseout",function(){

subMenu.className = "sub-menu hide";

});

addHandler(menuContent,"mouseout",function(){

subMenu.className = "sub-menu hide";

});

}

addHandler(window,"load",slideImg);

监听方法：

addEventListener() 和 removeEventListener() 有三个参数

第一个参数：事件名

第二个参数：事件处理函数

第三个参数：true为在捕获阶段调用，false为在冒泡阶段调用

功能： addEventListener() 可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用

removeEventListener() 移除事件处理程序，但不能移除匿名添加的函数

attachEvent() 可以为元素添加多个事件处理程序，触发时会按照添加顺序从后往前依次调用

detachEvent() 移除事件处理程序，但不能移除匿名添加的函数

附上 流程图

二级菜单流程图

图片轮播流程图

今天就到这里啦·····everybody 疫情要结束了，是否准备好开始你的向上之路呢？看得出来想要开学的小伙伴们内心非常迫切呀，按时报平安，你想要的就会到来滴~

see you again

原生JS实现图片轮播及二级菜单的绑定

猜你喜欢

热点阅读