一二级菜单的小米商城自动轮播图(HTML+CSS+JS实现)_商城首页左侧分类菜单栏右侧轮播图组合布局-程序员宅基地
技术标签： css html5 前端 javascript css3
实验结果如下：
如上图，主要仿小米商城的轮播图，左边为菜单栏，分为一二级菜单
如下所示：
项目结构如下：
废话少说，直接上代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/iconfont.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">手机，配件1</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 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">手机，配件2</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 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">手机，配件3</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 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">手机，配件4</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 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="iconfont icon "></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i class="iconfont icon "></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i class="iconfont icon "></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i class="iconfont 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 type="text/javascript" src="js/script.js"></script>
</body>
</html>
样式stycle.css
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
a{
text-decoration: none;
}
a:link,a:visited{
color: #5e5e5e;
}
/*@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'),*/
/* */
/*}*/
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
/*焦点图*/
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner-slide{
width: 1200px;
height: 460px;
float: left;
background-repeat: no-repeat;
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;
width: 40px;
height: 80px;
left: 244px;
background: url("../img/arrow.png") center center no-repeat;
top: 50%;
margin-top: -40px;
transform: rotate(180deg);
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.next{
left: auto;
right: 0;
transform: rotate(0deg);
}
.dots{
position: absolute;
right:24px;
bottom: 24px;
line-height: 12px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(7,17,27,0.4);
margin-left: 8px;
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset ;
cursor: pointer;
}
.dots span.active{
background-color: #fff;
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset ;
}
.menu-box{
position: absolute;
left: 0;
top: 0;
width: 244px;
height: 460px;
background: rgba(7,17,27,0.3);
z-index: 1;
}
.menu-content{
position: absolute;
left: 0;
top: 0;
width: 244px;
height: 460px;
z-index: 2;
}
.menu-item{
height: 64px;
line-height: 66px;
cursor: pointer;
padding: 0 24px;
}
.menu-item a{
display: block;
color: #fff;
font-size: 16px;
border-bottom: 1px solid rgba(255,255,255,0.2);
height: 63px;
padding: 0 8px;
position: relative;
}
.menu-item:last-child a{
border-bottom: none;
}
.menu-item i{
position: absolute;
right: 32px;
top: 2px;
color: rgba(255,255,255,0.5);
font-style: normal;
font-weight: normal;
font-family: "iconfont";
font-size: 24px;
}
.sub-menu{
width: 730px;
height: 458px;
position: absolute;
left: 244px;
top: 0;
background: #fff;
z-index: 500;
border: 1px solid #d9dde1;
box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
}
.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{
font-size: 16px;
color: #f01414;
line-height: 16px;
font-weight: bold;
margin: 28px 0 30px 0;
}
.sub-row{
margin-bottom: 25px;
}
.bold{
font-weight: 700;
}
.mr10{
margin-right: 10px;
}
.ml10{
margin-left: 10px;
}
.hide{
display: none;
}
因为箭头用了阿里矢量图片，需引入相应 iconfont.css
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1605661472363'); /* IE9 */
src: url('iconfont.eot?t=1605661472363#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAAsAAAAABrgAAAKMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBEIEWATYCJAMMCwgABCAFhG0HRRvrBREVjEGyH5JEgTqIqBSUzQkFkplACggUAAAAABAP/43ju29mvogIrpCkqBTA2Da0PZ2Ryn9hbpiGvlCukUTiHeuX7fedfVjzlkmJEAmR/zv1v1BsTqEAxoILx+zyYnMc3d5usAaDiRW8ovc/l9ObQAfS+laU0xwbj3oBxgEFtre1yYooIW6RXcSduIjTBGoNmhcHR10PRgo0KRD371QJjAohRTGy1UJlw8oiXkCF6vSQ2PA8+n58tRojkooMzTxfOjks//FpIN/wzTWOQJggr69AxjwKcaMxdQm6wqCyWlWvu7hSEdJc0UNMJPIVlfgPjySISqiyHkwr6cSHoFwSnwYkd53JcHe8TGCFbH9siLbWo++19auRwgGJQX+/tuOUPXojqSp79GmEoqv5vL2M3FDzfR17MLYty8r8Z9/HpA4ONl1Znx6ln/oZKq3vuj0PzYrbLZB/Jj0lTlqkV+mXQHDqN9YWURv/yboC3rxuITIUsHKqJcDiPyYGthRfisy5uCIqCj1ZG8CRkAWm1yHka/V+vK7jrnKhWscIX5WBO/RUG8/QQs5DhTrrUKmaextqzfHW12kjuqLUYNZbgtDsA0mjl5A1+6KF/EGFTn+o1BxdqHUh2nasMxnpZF/QV4wguEIackXEqpO4eo3xsfAlL40Ye5QmjYJj2uWshxXKHHOaU+yqEpBwCSvpPCwKhlo4w1DNRLVeWBY1vckMuWxN7BPIp1AEBK5AKsQqxDurSeXzayh2VPBJB63Hv4dEI+0dOEw2APVUFYh2L9c0TmIupQgggpXAShqGCgUG6uZhGRRSpmREorZg4XYEVZnra8rv2wW10GU5UuQo6m6L8NmQNE50/gLFRoGkrRY=') format('woff2'),
url('iconfont.woff?t=1605661472363') format('woff'),
url('iconfont.ttf?t=1605661472363') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1605661472363#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconarrow-right:before {
content: "\e81d";
}
.iconiconfont-left:before {
content: "\e601";
}
script.js
var index=0,
timer=null,//定时器
main=byId("main"),
prev=byId("prev"),
next=byId("next"),
pics=byId("banner").getElementsByTagName("div"),
banner=byId("banner"),
dots=byId("dots").getElementsByTagName("span"),
menuContent=byId("menu-content"),
menuItems=menuContent.getElementsByClassName("menu-item"),
subMenu=byId("sub-menu"),
innerBox=subMenu.getElementsByClassName("inner-box"),
size=pics.length;
function byId(id) {
return typeof(id) == "string" ? document.getElementById(id):id;
}
//封装通用事件绑定方法
function addHander(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 stopAutoPlay() {
if(timer){
clearInterval(timer);
}
}
//自动轮播
function startAutoPlay() {
timer=setInterval(function () {
index++;
if(index>=size) index=0;
changeImg();
},2000)
}
//切换图片
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";
}
//下一张图片
addHander(next,"click",function () {
index++;
if(index>=size) index=0;
changeImg();
})
addHander(prev,"click",function () {
index--;
if(index<0) index=size-1;
changeImg();
})
//点击圆点切换图片
for (var d=0;d<size;d++){
dots[d].setAttribute("data-id",d);
addHander(dots[d],"click",function () {
index=this.getAttribute("data-id");
changeImg();
})
}
//
for(var m=0,idx,mlen=menuItems.length;m<mlen;m++){
menuItems[m].setAttribute("data-index",m);
addHander(menuItems[m],"mouseover",function () {
subMenu.className="sub-menu";
idx=this.getAttribute("data-index");
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)";
})
}
//鼠标离开banner
addHander(banner,"mouseout",function () {
subMenu.className="sub-menu hide";
})
addHander(menuContent,"mouseout",function () {
subMenu.className="sub-menu hide";
})
addHander(subMenu,"mouseover",function () {
this.className="sub-menu ";
})
addHander(subMenu,"mouseout",function () {
this.className="sub-menu hide ";
})
//鼠标换入main,停止轮播
addHander(main,"mouseover",stopAutoPlay)
//鼠标离开main,继续轮播
addHander(main,"mouseout",startAutoPlay)
startAutoPlay();
图片资源如下：
轮播图片：
上下一张箭头图片：
二级菜单背景图片：
创作不易，来个一键三连，有不会怀孕？
智能推荐
EasyDarwin开源流媒体云平台之EasyRMS录播服务器功能设计_开源录播系统-程序员宅基地
文章浏览阅读3.6k次。需求背景EasyDarwin开发团队维护EasyDarwin开源流媒体服务器也已经很多年了，之前也陆陆续续尝试过很多种服务端录像的方案，有：在EasyDarwin中直接解析收到的RTP包，重新组包录像；也有：在EasyDarwin中新增一个RecordModule，再以RTSPClient的方式请求127.0.0.1自己的直播流录像，但这些始终都没有成气候；我们的想法是能够让整套EasyDarwin_开源录播系统
oracle Plsql 执行update或者delete时卡死问题解决办法_oracle delete update 锁表问题-程序员宅基地
文章浏览阅读1.1w次。今天碰到一个执行语句等了半天没有执行：delete table XXX where ......,但是在select 的时候没问题。后来发现是在执行select * from XXX for update 的时候没有commit，oracle将该记录锁住了。可以通过以下办法解决： 先查询锁定记录 Sql代码 SELECT s.sid, s.seri_oracle delete update 锁表问题
Xcode Undefined symbols 错误_xcode undefined symbols:-程序员宅基地
文章浏览阅读3.4k次。报错信息error:Undefined symbol: typeinfo for sdk::IConfigUndefined symbol: vtable for sdk::IConfig具体信息：Undefined symbols for architecture x86_64: "typeinfo for sdk::IConfig", referenced from: typeinfo for sdk::ConfigImpl in sdk.a(config_impl.o) _xcode undefined symbols:
项目05(Mysql升级07Mysql5.7.32升级到Mysql8.0.22)_mysql8.0.26 升级32-程序员宅基地
文章浏览阅读249次。背景《承接上文,项目05(Mysql升级06Mysql5.6.51升级到Mysql5.7.32)》,写在前面需要(考虑)检查和测试的层面很多，不限于以下内容。参考文档https://dev.mysql.com/doc/refman/8.0/en/upgrade-prerequisites.htmllink推荐阅读以上链接，因为对应以下问题，有详细的建议。官方文档：不得存在以下问题：0.不得有使用过时数据类型或功能的表。不支持就地升级到MySQL 8.0，如果表包含在预5.6.4格_mysql8.0.26 升级32
高通编译8155源码环境搭建_高通8155 qnx 源码-程序员宅基地
文章浏览阅读3.7k次。一.安装基本环境工具：1.安装git工具sudo apt install wget g++ git2.检查并安装java等环境工具2.1、执行下面安装命令#!/bin/bashsudoapt-get-yinstall--upgraderarunrarsudoapt-get-yinstall--upgradepython-pippython3-pip#aliyunsudoapt-get-yinstall--upgradeopenjdk..._高通8155 qnx 源码
firebase 与谷歌_Firebase的好与不好-程序员宅基地
文章浏览阅读461次。firebase 与谷歌 大多数开发人员都听说过Google的Firebase产品。 这就是Google所说的“ 移动平台，可帮助您快速开发高质量的应用程序并发展业务。 ”。 它基本上是大多数开发人员在构建应用程序时所需的一组工具。 在本文中，我将介绍这些工具，并指出您选择使用Firebase时需要了解的所有内容。 在开始之前，我需要说的是，我不会详细介绍Firebase提供的所有工具。 我..._firsebase 与 google
随便推点
k8s挂载目录_kubernetes（k8s）的pod使用统一的配置文件configmap挂载-程序员宅基地
文章浏览阅读1.2k次。在容器化应用中，每个环境都要独立的打一个镜像再给镜像一个特有的tag，这很麻烦，这就要用到k8s原生的配置中心configMap就是用解决这个问题的。使用configMap部署应用。这里使用nginx来做示例，简单粗暴。直接用vim常见nginx的配置文件，用命令导入进去kubectl create cm nginx.conf --from-file=/home/nginx.conf然后查看kub..._pod mount目录会自动创建吗
java计算机毕业设计springcloud+vue基于微服务的分布式新生报到系统_关于spring cloud的参考文献有啥-程序员宅基地
文章浏览阅读169次。随着互联网技术的发发展，计算机技术广泛应用在人们的生活中，逐渐成为日常工作、生活不可或缺的工具，高校各种管理系统层出不穷。高校作为学习知识和技术的高等学府，信息技术更加的成熟，为新生报到管理开发必要的系统，能够有效的提升管理效率。一直以来，新生报到一直没有进行系统化的管理，学生无法准确查询学院信息，高校也无法记录新生报名情况，由此提出开发基于微服务的分布式新生报到系统，管理报名信息，学生可以在线查询报名状态，节省时间，提高效率。_关于spring cloud的参考文献有啥
VB.net学习笔记（十五）继承与多接口练习_vb.net 继承多个接口-程序员宅基地
文章浏览阅读3.2k次。Public MustInherit Class Contact '只能作基类且不能实例化 Private mID As Guid = Guid.NewGuid Private mName As String Public Property ID() As Guid Get Return mID End Get_vb.net 继承多个接口
【Nexus3】使用-Nexus3批量上传jar包 artifact upload_nexus3 批量上传jar包 java代码-程序员宅基地
文章浏览阅读1.7k次。1.美图# 2.概述因为要上传我的所有仓库的包，希望nexus中已有的包，我不覆盖，没有的添加。所以想批量上传jar。3.方案1-脚本批量上传PS：nexus3.x版本只能通过脚本上传3.1 批量放入jar在mac目录下,新建一个文件夹repo,批量放入我们需要的本地库文件夹,并对文件夹授权(base) lcc@lcc nexus-3.22.0-02$ mkdir repo2..._nexus3 批量上传jar包 java代码
关于去隔行的一些概念_mipi去隔行-程序员宅基地
文章浏览阅读6.6k次，点赞6次，收藏30次。本文转自http://blog.csdn.net/charleslei/article/details/486519531、什么是场在介绍Deinterlacer去隔行处理的方法之前，我们有必要提一下关于交错场和去隔行处理的基本知识。那么什么是场呢，场存在于隔行扫描记录的视频中，隔行扫描视频的每帧画面均包含两个场，每一个场又分别含有该帧画面的奇数行扫描线或偶数行扫描线信息，_mipi去隔行
ABAP自定义Search help_abap 自定义 search help-程序员宅基地
文章浏览阅读1.7k次。DATA L_ENDDA TYPE SY-DATUM. IF P_DATE IS INITIAL. CONCATENATE SY-DATUM(4) '1231' INTO L_ENDDA. ELSE. CONCATENATE P_DATE(4) '1231' INTO L_ENDDA. ENDIF. DATA: LV_RESET(1) TY_abap 自定义 search help