原生JS实现图片轮播及二级菜单的绑定
我们在各个电商网站上都可以看到图片轮播，当然框架实现的话，想必对大家来说是 so easy 的，那么该如何用原生JS来实现呢？请开始我的show~~~
动起来
做出来的效果是这样滴
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”main” id=”main”>
<div class=”menu-box”>
</div>
<!–内容–>
<div class=”sub-menu hide” id=”sub-menu”>
<div class=”inner-box”>
<div class=”sub-inner-box”>
<div class=”title”>手机、配件</div>
<div class=”sub-row”>
<span class=”bold mr10″>手机通讯：</span>
<a href=””>手机</a>
<span class=”ml10 mr10″>/</span>
<a href=””>手机维修</a>
<span class=”ml10 mr10″>/</span>
<a href=””>以旧换新</a>
</div>
<div class=”sub-row”>
<span class=”bold mr10″>手机配件：</span>
<a href=””>手机壳</a>
<span class=”ml10 mr10″>/</span>
<a href=””>手机存储卡</a>
<span class=”ml10 mr10″>/</span>
<a href=””>数据线</a>
<span class=”ml10 mr10″>/</span>
<a href=””>充电器</a>
<span class=”ml10 mr10″>/</span>
<a href=””>电池</a>
</div>
<div class=”sub-row”>
<span class=”bold mr10″>经营商：</span>
<a href=””>中国联通</a>
<span class=”ml10 mr10″>/</span>
<a href=””>中国移动</a>
<span class=”ml10 mr10″>/</span>
<a href=””>中国电信</a>
</div>
<div class=”sub-row”>
<span class=”bold mr10″>智能设施：</span>
<a href=””>智能手环</a>
<span class=”ml10 mr10″>/</span>
<a href=””>智能家居</a>
<span class=”ml10 mr10″>/</span>
<a href=””>智能手表</a>
<span class=”ml10 mr10″>/</span>
<a href=””>其余配件</a>
</div>
<div class=”sub-row”>
<span class=”bold mr10″>娱乐：</span>
<a href=””>耳机</a>
<span class=”ml10 mr10″>/</span>
<a href=””>音响</a>
<span class=”ml10 mr10″>/</span>
<a href=””>收音机</a>
<span class=”ml10 mr10″>/</span>
<a href=””>麦克风</a>
</div>
</div>
</div>
<div class=”inner-box”>
<div class=”sub-inner-box”>
<div class=”title”>电脑</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>电脑：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>笔记本</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>平板</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>一体机</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>电脑配件：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>显示器</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>CPU</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>主板</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>硬盘</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>电源</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>显卡</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>其余配件</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>游戏设施：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>游戏机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>耳机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>游戏软件</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>网络产品：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>路由器</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>网络机顶盒</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>交换机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>存储卡</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>网卡</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>外部产品：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>鼠标</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>键盘</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>U盘</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>移动硬盘</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>鼠标垫</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>电脑清洁</a>
</div>
</div>
</div>
<div class=”inner-box”>
<div class=”sub-inner-box”>
<div class=”title”>家用电器</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>电视：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>国产品牌</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>韩国品牌</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>欧美品牌</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>空调：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>显示器</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>柜式</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>中央</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>壁挂式</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>冰箱：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>多门</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>对开门</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>三门</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>双门</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>洗衣机：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>滚筒式洗衣机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>迷你洗衣机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>洗烘一体机</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>厨房电器：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>油烟机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>洗碗机</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>燃气灶</a>
</div>
</div>
</div>
<div class=”inner-box”>
<div class=”sub-inner-box”>
<div class=”title”>家具</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>家纺：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>被子</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>枕头</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>四件套</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>床垫</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>灯具：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>台灯</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>顶灯</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>节能灯</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>应急灯</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>厨具：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>烹饪锅具</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>餐具</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>菜板刀具</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>家装：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>地毯</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>沙发垫套</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>装饰字画</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>照片墙</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>窗帘</a>
</div>
<div class=”sub-row”>
? ? ? ? ? ? ? ? ? ? ? <span class=”bold mr10″>生活日用：</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>收纳用品</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>浴室用品</a>
? ? ? ? ? ? ? ? ? ? ? <span class=”ml10 mr10″>/</span>
? ? ? ? ? ? ? ? ? ? ? <a href=””>雨伞雨衣</a>
</div>
</div>
</div>
</div>
<!– 菜单 –>
<div class=”menu-content” id=”menu-content”>
<div class=”menu-item”>
<a href=””>
<span>手机、配件</span>
<i class=”icon”></i>
</a>
</div>
<div class=”menu-item”>
<a href=””>
<span>电脑</span>
<i class=”icon”></i>
</a>
</div>
<div class=”menu-item”>
<a href=””>
<span>家用电器</span>
<i class=”icon”></i>
</a>
</div>
<div class=”menu-item”>
<a href=””>
<span>家具</span>
<i class=”icon”></i>
</a>
</div>
</div>
<div class=”banner” id=”banner”>
<a href=””>
<div class=”banner-slide slide1 slide-active”></div>
</a>
<a href=””>
<div class=”banner-slide slide2″></div>
</a>
<a href=””>
<div class=”banner-slide slide3″></div>
</a>
</div>
<a href=”javascript:void(0)” class=”button prev” id=”prev”></a>
<a href=”javascript:void(0)” class=”button next” id=”next”></a>
<div class=”dots” id=”dots”>
<span class=”active”></span>
<span></span>
<span></span>
</div>
</div>
<script src=”js/script.js”></script>
</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
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生JS实现图片轮播及二级菜单的绑定
