目录：完整源码仅供学习
一、效果演示 二、完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码2.3.1 index.css2.3.2 base.css 三、完整项目下载一、效果演示
动态图
静态图
左边子菜单显示
二、完整源代码
2.1 HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验 </title><link rel="shortcut icon" href="images/logo.svg"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css"><base href="_blank"></head><body><!-- 项目左边 --><div class="container-left" id="mainnav"><div class="menu"><div class="menu-left"><a href="#"><img src="./images/logo.svg"></a></div><div class="nav">门店</div><div class="nav">我的账户</div><div class="nav">菜单</div><div class="menu-right" id="btnSubnav"><img src="./images/icon-menu.svg" alt=""></div></div><div class="menu-text"><div class="menu-text-top">心情惬意，来杯咖啡吧 ☕</div><div class="menu-text-bottom"><img src="./images/icon-login.svg" alt=""><div class="login">登录</div><div class="reges">注册</div></div></div></div><!-- 点击容器左边右上角的三条杠会弹出子导航栏 --><div class="container-left-subnav" id="subnav"><div class="menu"><div class="menu-left"><a href="#"><img src="./images/logo.svg"></a></div><div class="subnav-right" id="subnavClose"><img src="./images/x.png" alt=""></div></div><div class="subnav-content" ><ul class="subnav-content-ul"><li><a href="">门店</a></li><li><a href="">星享俱乐部</a></li><li><a href="">菜单</a></li><li><hr/></li><li><a href="">星巴克移动应用</a></li><li><a href="">星礼卡</a></li><li><a href="">星巴克臻选™</a></li><li><a href="">啡快™- 在线点 到店取</a></li><li><a href="">专星送</a></li><li><a href="">咖啡星讲堂</a></li><li><a href="">上海烘焙工坊</a></li><li><a href="">关于星巴克</a></li><li><a href="">帮助中心</a></li><li><hr/></li></ul><img src="./images/icon-login.svg"><div class="login">登录</div><div class="reges">注册</div><div class="subnav-bottom-text">English | 隐私政策 | 使用条款</div></div><div class="subnav-bottom"></div></div><!-- 项目右边 --><div class="container-right"><!--第一部分 轮播图 --><div class="banner" id="banner"><ul class="banner-ul" id="bannerul"><li><img src="./images/banner01.jpg"></li><li><img src="./images/banner02.jpg"></li><li><img src="./images/banner03.jpg"></li><li><img src="./images/banner04.jpg"></li><li><img src="./images/banner01.jpg"></li></ul><div class="banner-right-buttom" id="btnNext"><img src="./images/right.png"></div><div class="banner-promotion">广告</div></div><!-- 第二部分 小图三张 --><div class="promotion"><div class="photoShow"><a href="/" target="_blank"><img src="./images/page01.jpg"></a></div><div class="photoShow"><a href="/design-studio/" target="_blank"><img src="./images/page02.jpg"></a></div><div class="photoShow"><a href="/about/careers/" target="_blank"><img src="./images/page03.jpg"></a></div></div><!-- 第三部分 咖啡俱乐部 --><div class="club"><div class="club-left"><div class="club-left-top">星享俱乐部</div><div class="club-left-middle">开启您的星享之旅，星星越多、会员等级越高、<br />好礼越丰富。<a href="">了解更多 ></a></div><div class="club-left-bottom"><span class="left">注册</span><span class="right">登录</span></div></div><div class="club-right"><img src="./images/club.svg"></div></div><!-- 第四部分 精选，小图四张 --><div class="choice"><div class="choice-top">星巴克精选</div><div class="choice-middle">在星巴克天猫旗舰店发现更多咖啡心意</div><div class="choice-bottom"><div class="choice-bottom-card"><a href="/p/rd796757.htm" target="_blank"><img src="./images/card01.png"><p class="choice-bottom-card-top">会员新礼包</p><p class="choice-bottom-card-middle">星享卡新升级<br />更多新意好礼</p><a href="/p/rd796757.htm" target="_blank">了解更多 ></a></a></div><div class="choice-bottom-card"><a href="/p/rd993825.htm?spm=a1z10.1-b-s.w5001-14489348230.6.MtuIoi"target="_blank"><img src="./images/card02.png"><p class="choice-bottom-card-top">星礼卡</p><p class="choice-bottom-card-middle">用一份心礼<br />让心意相随</p><a href="/p/rd796757.htm" target="_blank">了解更多 ></a></a></div><div class="choice-bottom-card"><a href="/p/rd103766.htm?spm=a1z10.1-b-s.w5001-14489348230.8.MtuIoi"target="_blank"><img src="./images/card03.png"><p class="choice-bottom-card-top">电子产品券</p><p class="choice-bottom-card-middle">心意<br />从这一杯开始</p><a href="/p/rd796757.htm" target="_blank">了解更多 ></a></a></div><div class="choice-bottom-card"><a href="/category-1141443816.htm?spm=a1z10.1-b-s.w4006-14489348233.10.MtuIoi"target="_blank"><img src="./images/card04.png"><p class="choice-bottom-card-top">咖啡生活</p><p class="choice-bottom-card-middle">星巴克<br />用心制作</p><a href="/p/rd796757.htm" target="_blank">了解更多 ></a></a></div></div></div><!-- 第五部分（最后一部分） 咖啡文化 --><div class="culture"><div class="culture-top">1912 派克街 | 咖啡星讲堂</div><div class="culture-middle">了解更多星巴克咖啡文化</div><div class="culture-bottom" id="cultureBottom"><ul class="culture-ul" id="cultureUl"><li class="culture-bottom-photo"><a href="/coffee-blog/the-origin-of-coffee-and-its-cultivation/"target="_blank"><div class="culture-bottom-photo-describe">咖啡知识</div><img src="./images/coffeeImg01.jpg"><p>咖啡的起源与种植</p></a></li><li class="culture-bottom-photo"><a href="/coffee-blog/the-4-fundamentals/" target="_blank"><div class="culture-bottom-photo-describe">咖啡品鉴</div><img src="./images/coffeeImg02.jpg"><p>咖啡调制</p></a></li><li class="culture-bottom-photo"><a href="/coffee-blog/roast-story/" target="_blank"><div class="culture-bottom-photo-describe">咖啡知识</div><img src="./images/coffeeImg03.jpg"><p>咖啡烘焙</p></a></li><li class="culture-bottom-photo"><a href="/coffee-blog/pour-over/" target="_blank"><div class="culture-bottom-photo-describe">咖啡品鉴</div><img src="./images/coffeeImg04.jpg"><p>手冲咖啡</p></a></li></ul></div><!-- 下一个按钮 --><div class="culture-btn-next" id="photoNext"><img src="./images/rightarrow.png" alt=""></div><div class="culture-btn-pre" id="photoPre"><img src="./images/leftarrow.png" alt=""></div></div><!-- 报备号 --><div class="final-text"><img src="./images/icpicon.png" alt="">沪公网安备 31010402000253号 | 沪ICP备17003747号</div></div><script type="text/javascript" src="./js/my.js"></script></body></html>
2.2 JS代码
2.3 CSS代码
my.js
// 获取展示轮播图的div块var bannerMainBody = document.getElementById("banner");var ul = document.getElementById("bannerul");// 通过ul获取ul内的li的个数var picList = ul.getElementsByTagName("li");// 获取下一个按钮var btnNext = document.getElementById("btnNext");// 设置图片的坐标，从-1开始。因为我的函数是先自增的var iNow = -1;// console.log(picList.length);var timer = null;// 轮播图自动播放,每隔1.5秒function StratAutoPlay() {timer = setInterval(function () {if (++iNow == picList.length) {iNow = 0;// 当轮播到最后一张重复的一号图时，关闭线性动画，// 并立刻跳转到第一张图，实现轮播，循环到第二张图ul.style.transition = "none";ul.style.left = "0px";}else{// 开启线性动画ul.style.transition = "left 1s linear";}change(iNow);}, 1500);}// 轮播图停止播放function endAutoPlay() {if (timer) {clearInterval(timer);}}// 当鼠标不在轮播图区域时，轮播图自动播放。否则停止function bannerPic() {bannerMainBody.onmouseover = function () {endAutoPlay();}bannerMainBody.onmouseout = function () {StratAutoPlay();}bannerMainBody.onmouseout();}// 启动自动轮播函数bannerPic();//移动函数,根据下标将图片向左移动function change(idx) {ul.style.left = -idx * 1200 + "px";// console.log(ul.style.left);}// 点击下一张，当图片下标到最后一张的时候返回第一张btnNext.onclick = function () {if (++iNow == picList.length) {iNow = 0;ul.style.transition = "none";ul.style.left = "0px";}else{ul.style.transition = "left 1s linear";}change(iNow);}// 底部culture图片滚动var cultureBottom = document.getElementById("cultureBottom");var cutureUl = document.getElementById("cultureUl");var photoNext = document.getElementById("photoNext");var photoPre = document.getElementById("photoPre");photoPre.style.display = "none";photoNext.onclick = function(){cutureUl.style.left = -370 + "px";// 显示左移按钮photoPre.style.display = "block";}photoPre.onclick = function(){cutureUl.style.left = 5 + "px";// 隐藏左移按钮photoPre.style.display = "none";}// 子导航var btnSubnav = document.getElementById("btnSubnav");var mainnav = document.getElementById("mainnav");var subnav = document.getElementById("subnav");var subright = document.getElementById("subnavClose");//函数：mainnavDisplay 对主导航页的隐藏与显示作控制function mainnavDisplay(opacity,visibility,zIndex){// 设置div的元素的不透明级别，0为完全透明，1为完全不透明。默认值为1mainnav.style.opacity = opacity;// visibility属性规定元素是否可见mainnav.style.visibility = visibility;// z-index 属性设置元素的堆叠顺序;// 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。mainnav.style.zIndex = zIndex;}//函数：subnavDisplay 对主导航页的隐藏与显示作控制function subnavDisplay(opacity,visibility,zIndex){subnav.style.opacity = opacity;subnav.style.visibility = visibility;subnav.style.zIndex = zIndex;}btnSubnav.onclick = function(){mainnavDisplay(0, "hidden", 1);subnavDisplay(1, "visible", 2);// mainnav.style.display = "none";// subnav.style.display = "block";// mainnav.style.opacity = 0;// mainnav.style.visibility = "hidden";// mainnav.style.zIndex = 1;// subnav.style.opacity = 1;// subnav.style.visibility = "visible";// subnav.style.zIndex = 2;}subright.onclick = function(){mainnavDisplay(1, "visible", 2);subnavDisplay(0, "hidden", 1);// mainnav.style.opacity = 1;// mainnav.style.visibility = "visible";// mainnav.style.zIndex = 2;// subnav.style.opacity = 0;// subnav.style.visibility = "hidden";// subnav.style.zIndex = 1;// subnav.style.display = "none";// mainnav.style.display = "block";}
2.3.1 index.css
index.css
*{margin: 0;padding: 0;box-sizing: border-box;}html,body{width: 100%;height: 100%;}/* 整体容器左边 */.container-left{width: 25%;height: auto;position: fixed;/* background-color: rgba(196, 100, 100, 0.836); */float: left;top: 0;left: 0;z-index: 2;/* display: none; */}.menu{height: 50px;width: 400px;padding: 30px 10px;}.menu-left img{width: 36px;height: 36px;float: left;margin-left: 20px;}.nav{margin-left: 20px;float: left;height: 18px;font-weight: 700;line-height: 30px;}.menu-right{float: left;margin-left: 100px;margin-top: 6px;align-items: center;}.menu-text{width: 300px;margin: 250px 50px;}.menu-text-top{font-size: 26px;font-weight: 800;}.menu-text-bottom{width: 300px;height: 100px;margin-top: 30px;}.menu-text-bottom img{width: 28px;height: 28px;float: left;}.login{color: #00a862;float: left;font-size: 17px;line-height: 22px;margin-left: 10px;cursor: pointer;}.reges{float: left;color: #00a862;line-height: 15px;font-size: 18px;padding: 4px 10px;border: 1px solid #00a862;border-radius: 48px;margin-left: 50px;padding: 5px 13px;cursor: pointer;}/* 容器左边右上角的三条杠会弹出子导航栏 */.container-left-subnav{width: 25%;float: left;position: fixed;top: 0px;left: 0px;z-index: 1;opacity: 0;visibility: hidden; /* 过渡动画的时间与效果 */transition: 0.3s ease-in;}.subnav-right{float: right;width: 56px;height: 48px;position: absolute;top: -3;right: 0;margin-left: 30px;}.subnav-right img{width: 38px;height: 38px;}.subnav-content{padding: 40px 60px 20px;}.subnav-content-ul li{font-size: 20px;margin-bottom: 13px;font-weight: bold;}.subnav-content-ul a{color: black;}.subnav-content-ul hr{background-color: rgba(128, 128, 128, 0.486);margin: 20px 0px;}.subnav-content img{width: 28px;height: 28px;float: left;}.subnav-bottom-text{margin-top: 70px;display: inline;font-size: 14px;float: left;color: grey;margin-right: 90px;}/* 整体右边部分样式 */.container-right{width: 75%;height: 1900px;float: right;/* 隐藏水平滚动条 */overflow-x: hidden;}.banner{width: 1200px;height: 520px;position: relative;overflow: hidden;}.banner-ul{width: 6000px;height: 520px;position: absolute;/* 轮播图平滑移动 */transition: left 1s linear;/* left: -1000px; */}.banner-ul li{float: left;}.banner-ul img{width: 1200px;height: 520px;}.banner-right-buttom{width: 48px;height: 48px;position: absolute;top: 45%;right: 70px;/* background-color: #241f1f; */transition-duration: 0.5s;}.banner-right-buttom img{width: 48px;height: 48px;/* position: relative; */}.banner-right-buttom:hover{right: 60px;}.banner-promotion{position: absolute;top: 10px;right: 20px;font-size: 14px;padding: 2px 4px;box-sizing: border-box;background-color: rgb(8,47,50);color: rgba(253, 253, 253, 0.575);}/* 第二部分 小图三张 */.promotion{width: 100%;height: 300px;padding: 30px 0;background-color: rgb(247,247,247);}.photoShow{float: left;width: 28%;margin-left: 40px;position: relative;cursor: pointer;}.photoShow img{position: relative;border-radius: 5px;top:10px;width: 100%;height: 230px;transition-duration: 0.4s;}/* 悬停浮动效果 */.photoShow img:hover{top: 0px;box-shadow: 0px 2px 2.5px 1px #aaa;}/* 第三部分 咖啡俱乐部 */.club{/* width: 1200px; */width: 100%;height: 200px;padding: 50px 200px;}.club-left{float: left;width: 50%;height: 100px;}.club-left-top{font-size: 22px;}.club-left-middle{color: gray;margin: 20px 0;}.club-left-middle a{color: #c2a661;}.club-left-bottom{float: left;width: 300px;margin-top: 20px;}.club-left-bottom span{color: #00a862;border: 1px solid #00a862;border-radius: 48px;font-size: 18px;padding: 6px 18px;box-sizing: border-box;cursor: pointer;}.club-right{width: 50%;height: 100px;float: left;margin-left: 400px;position: relative;top: -70%;left: 5%;}.club-right img{width: 80%;height: 72px;}/* 第四部分 精选，小图四张 */.choice{width: 100%;height: 375px;margin:30px 0px;padding: 15px 200px;background-color: rgb(247,247,247);box-sizing: border-box;}.choice-top{font-size: 22px;font-weight: bold;width: 50%;/* position: absolute; */margin: 0px 350px;}.choice-middle{color: gray;width: 300px;margin: 20px 270px;}.choice-bottom{width: 100%;height: 190px;margin-top: 30px;float: left;}.choice-bottom-card{width: 22%;height: 180px;margin-left: 20px;background-color: #ffffff;text-align: center;box-shadow:0px 0px 0.1px 0.1px rgba(151, 150, 150, 0.5) ;position: relative;top: 20px;left: 2%;float: left;/* border: 0.1px solid gray; */border-radius: 5px;transition-duration: 0.5s;cursor: pointer;}.choice-bottom-card img{position: relative;top: -30px;}.choice-bottom-card:hover{top: 10px;box-shadow: 0px 2px 2.5px 1px #aaa;}.choice-bottom-card a{color: #c2a66c;font-size: 13px;}.choice-bottom-card-top{font-weight: bold;margin-top: -20px;margin-bottom: 10px;}.choice-bottom-card-middle{color: gray;margin-bottom: 10px;font-size: 15px;line-height: 28px;}/* 第五部分 */.culture{width: 100%;height: 20%;padding: 2% 10%;box-sizing: border-box;}.culture-top{font-weight: bold;font-size: 22px;width: 100%;margin: 0 30%;margin-bottom: 3%;}.culture-middle{color: gray;font-size: 16px;width: 100%;margin: 0 34%;}.culture-bottom{width: 100%;height: 30%;margin-left: -10%;position: relative;/* overflow: hidden; *//* float: left; */}.culture-ul{width: 1600px;position: absolute;/* 平滑移动 */transition: 0.5s linear;/* 向右平滑移动 *//* transition: right 0.5s linear; */overflow: hidden;box-sizing: border-box;padding: 0px 130px;}.culture-bottom-photo{width: 300px;height: 210px;float: left;margin-top: 4%;margin-left: 20px;box-shadow:0.5px 0px 0px 0px rgba(128, 128, 128, 0.438) ;border-bottom: 0.5px solid rgba(128, 128, 128, 0.438);border-right: 0.5px solid rgba(128, 128, 128, 0.438);border-radius: 3px;position: relative;top: 10px;transition-duration: 0.5s;cursor: pointer;}.culture-bottom-photo:first-child{margin-left: 70px;}.culture-bottom-photo:hover{top: 0px;/* box-shadow: 0px 2px 2.5px 1px #aaa; */}.culture-bottom-photo img{width: 100%;height: 160px;}.culture-bottom-photo-describe{position: absolute;top: 2%;background-color: rgb(194,166,97);color: white;padding: 6px 10px;}.culture-bottom-photo p{margin-top: 10px;margin-left: 10px;color:rgba(0, 0, 0, 0.575);}.culture-btn-pre img{position: relative;top: 0px;left: -90px;background-color: #fff;border-radius: 48px;cursor: pointer;}.culture-btn-next img{position: relative;top: 38px;right: -950px;background-color: #ffffff;border-radius: 48px;cursor: pointer;}/* 最底部的报备号 */.final-text{width: 100%;height: 1%;text-align: center;margin-left: -3%;margin-top: 2rem;}
2.3.2 base.css
/*初始化开始*/*{margin: 0;padding: 0;}a{text-decoration: none;}ul li{list-style:none;}ol li{list-style:none;}.fl{float: left;}.fr{float: right;}.clearfix::after {content: "";display: block;clear: both;}.auto-img {width: 100%;display: block;}/* 去掉图片底部缝隙 */img{vertical-align: bottom;}@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff2') format('woff2'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/*初始化结束*/
三、完整项目下载
可以透过桃宝代下csdn帮下载。
项目代码和所有用到的图片都在这里了。
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画.rar
