pc端-轮播图 和 二级菜单
2024-04-07 23:13:58
本篇目录
- 轮播图 + 二级菜单
轮播图 + 二级菜单
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;}a:link,a:visited{text-decoration: none;color: #333;}body{font-family: "微软雅黑";color: #14191e;}.main{position: relative;width: 1200px;height: 460px;margin: 30px auto;overflow: hidden;}.banner{position: relative;width: 1200px;height: 460px;overflow: hidden;}.banner-slide{display: none;position: absolute;width: 1200px;height: 460px;background-repeat: no-repeat;}.slide1{background-image:url("./img/bg1.jpg");}.slide2{background-image:url("./img/bg2.jpg");}.slide3{background-image:url("./img/bg3.jpg");}.slide-active{display: block;}.button{position: absolute;top: 50%;left: 244px;margin-top: -40px;width: 40px;height: 80px;background: url(./img/arrow.png) no-repeat center center;}.next{left: auto;right: 0;}.button:hover{background-color: #333;opacity: 0.8;filter:alpha(opacity=80);}.prev{transform: rotate(180deg);}.dots{position: absolute;right: 20px;bottom: 24px;text-align: right;}.dots span{display: inline-block;width: 12px;height: 12px;line-height: 12px;margin-left: 8px;border-radius: 50%;background: rgba(7,17,27,0.4);box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;cursor: pointer;}.dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background: #fff;}/*菜单*/.menu-box{z-index: 1;position: absolute;top: 0;left: 0;width: 244px;height: 460px;background: rgba(7,17,27,0.5);opacity: 0.5;}.menu-content{z-index: 2;position: absolute;top: 0;left: 0;width: 244px;height: 454px;padding-top: 6px;}.menu-item{position: relative;height: 64px;line-height: 66px;padding: 0 24px;font-size: 16px;}.menu-item a:link, .menu-item a:visited{color: #fff;}.menu-item a{display: block;height: 63px;padding: 0 8px;border-bottom: 1px solid rgba(255,255,255,0.2);}.menu-item i{position: absolute;top: 2px;right: 32px;color: rgba(255,255,255,0.5);font-size: 24px;font-style: normal;font-weight: normal;}.sub-menu{z-index: 3;position: absolute;top: 0;left: 244px;width: 730px;height: 458px;border:1px solid #d9dde1;background: #fff;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);}.inner-box{width: 100%;height: 100%;background: url(./img/fe.png) no-repeat center center;display: none;}.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;}.title{line-height:16px;margin:28px 0 30px 0; color: #f01414;font-size: 16px;font-weight: bold;}.sub-row{margin-bottom: 25px;}.bold{font-weight: bold;}.mr10{margin-right: 10px;}.ml10{margin-left: 10px;}.hide{display: none;}</style></head><body><div id="main" class="main"><!-- 导航菜单 --><div class="menu-box"></div><!-- 主菜单、一级菜单 --><div id="menu-content" class="menu-content"><div class="menu-item"><a href=""><span>手机配件</span><i>></i></a></div><div class="menu-item"><a href=""><span>电脑</span><i>></i></a></div><div class="menu-item"><a href=""><span>家用电器</span><i>></i></a></div><div class="menu-item"><a href=""><span>家具</span><i>></i></a></div></div><!-- 子菜单、二级菜单--><div id="sub-menu" class="sub-menu hide"><!-- 手机、配件 --><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="mr10 ml10">/</span><a href="#">手机维修</a><span class="mr10 ml10">/</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 id="banner" class="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)" id="prev" class="button prev"></a><a href="javascript:void(0)" id="next" class="button next"></a><!-- 原点导航 --><div id="dots" class="dots"><span class="active"></span><span></span><span></span></div></div></body><script>//封装一个代替getElementById()的方法//参数idfunction byId(id){//id的值是字符串类型//判断id的值和类型//如果id是string就返回document.getElementById(id) 否则原样返回idreturn typeof(id) === "string" ? document.getElementById(id) : id;}//就取到<div id="main" class="main"></div>//相当于console.log(document.getElementById("main"));//如果id="55" 则返回55// console.log(byId("main")); //声明全局变量,因为要在多个函数引用var index = 0, //索引值 从slide1开始timer = null, //定时器//getELementsByTagName() 返回的是数组pics = byId("banner").getElementsByTagName("div"), //banner下的divlen = pics.length, //div的个数dots = byId("dots").getElementsByTagName("span"), //dots下的spanprev = byId("prev"),//上一张next = byId("next"),//下一张//二级菜单menu = byId("menu-content"),menuItems = menu.getElementsByClassName("menu-item"),subMenu = byId("sub-menu"),innerBox = subMenu.getElementsByClassName("inner-box");//轮播图function slideImg(){//声明变量main 获取id="main"var main = byId("main");//滑动清除定时器 离开继续//鼠标划过main 执行匿名函数main.onmouseover = function(){//清除定时器//如果timer是true,就清除间歇调用timerif(timer) clearInterval(timer)}//鼠标离开main 执行匿名函数//调用onmouseout事件main.onmouseout = function(){//加定时器//间歇调用 每隔3秒timer = setInterval(function(){//鼠标经过再离开后 index每隔3秒加1index++; //len = 3 索引是0 1 2if(index >= len){index = 0 //返回第一张}//打印012 012 012 不会超过3// console.log(index);//切换图片 在外面封装一个函数changeImg();//changeImg(index);因index是全局变量所以不用传参},3000);}//调用onmouseout方法//自动(刷新页面时)在id=main上触发鼠标离开的事件main.onmouseout();//点击原点切换图片//遍历所有点击,且绑定点击事件for(var d=0; d<len; d++){// console.log(d);//这里就是d的每一个值 0 1 2// 给所有span添加一个id的属性,值为d,作为当前span的索引dots[d].id = d; //第一个span里 有id="0",第二个id="1",第三个id="2"dots[d].onclick = function(){//改变index为当前span的索引// alert(d);//在function中有作用域,d等于3,是最终值//改变index为当前span的id值// alert(this.id);// alert(index);index = this.id;// 调用切换图片函数,实现切换图片功能changeImg();}}//下一张next.onclick = function(){index++;if(index >= len) index = 0;// console.log(index);changeImg();}//上一张prev.onclick = function(){index--;//就返回最后一张 长度减一就是最后的索引值if(index < 0) index = len-1;changeImg();}//二级菜单//遍历主菜单,且绑定事件for(var m=0; m<menuItems.length; m++){//给每一个menu-item定义data-index属性,作为索引//添加自定义属性menuItems[m].setAttribute("data-index",m);//鼠标划过menuItems的时候,执行menuItems[m].onmouseover = function(){//让sub-menu去掉class="hide"等与sub-menusubMenu.className = 'sub-menu';//获取索引= data-indexvar idx = this.getAttribute("data-index");//遍历让innerBox先全部隐藏for(var j=0; j<innerBox.length;j++){innerBox[j].style.display = 'none';menuItems[j].style.background = 'none';}menuItems[idx].style.background = "rgba(0,0,0,0.1)";//innerBox索引绑定idxinnerBox[idx].style.display = 'block';}}//鼠标离开主菜单时 子菜单隐藏menu.onmouseout = function(){subMenu.className = "sub-menu hide";}//鼠标经过子菜单时 显示不隐藏subMenu.onmouseover = function(){this.className = "sub-menu";}//鼠标离开子菜单时 隐藏subMenu.onmouseout =function(){subMenu.className = "sub-menu hide";}}//切换图片(轮播切换)function changeImg(){//遍历banner下的div,将其隐藏for(var i=0; i<len; i++){pics[i].style.display = 'none';//遍历dots下所有的span,将div隐藏,将span清除类dots[i].className = "";}//根据index索引找到当前div,将其显示出来pics[index].style.display = 'block';//根据index索引找到当前span,将其显示出来和设为当前dots[index].className = "active";}slideImg();</script></html>pc端-轮播图 和 二级菜单相关推荐
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第七天PC端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 手撸移动端轮播图（内含源码）
移动轮播图 移动端轮播图与PC段轮播图,在技术选择上是有区别的,因为移动端的浏览器版本非常好,对于H5和CSS3的支持非常完美,所以很多效果可以CSS3的方式实现,比如可以使用 Transorm 属性 ...
- 移动端网页特效移动端轮播图
触屏事件 移动端浏览器兼容性较好,无需考虑JS兼容问题,但是移动端也有自己独特之处,比如触屏事件touch (也称触摸事件)Android和IOS都有 touch对象代表一个触摸点 ,触屏事件可响应用 ...
- 移动端实现文字轮播_js实现移动端轮播图
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 Document 这是CSS /* 搜索部分 */ .jd_layout{ width: 100%; max-w ...
- js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
- vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
- pc端html轮播带滑块,原生js实现移动端+pc端 轮播插件
slide.js 原生js写的轮播兼容 pc+移动端 插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第六天移动端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
最新文章
- JEECG微云快速开发平台
- 前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段
- python programming training(一)：最大回文子字符串
- 【最全最详细】publiccms其他常用代码片段（内容、站点)
- bzoj 4002: [JLOI2015]有意义的字符串
- 风控小白入门 | 关于评分模型验证的7大问题回答
- CC学iOS杂记 001_Device
- 用记事本编写一个Servlet项目
- jquery_ajax_js,浅析jQuery Ajax通用js封装
- 几款免费开源的企业管理软件
- DS证据理论基础研究--主要将其应用于旅游管理科学研究中
- Python路飞学城老男孩内部书籍，Python全栈开发实战pdf
- linux安装谷歌浏览器（Chrome）
- ArduinoUNO实战-第二十二章-红外遥控实验
- [Mac]制作MacOs Mojave系统盘教程 (全新安装 MacOs系统)
- 为什么计算机能读懂 1 和 0 ？
- ScannerException: while scanning for the next token found character ‘@‘ 问题解决
- k均值算法的优化目标和随机初始化
- 【技术推荐】WebLogic 反序列化漏洞深入分析
- 线控转向量产商用的挑战与曙光