用到了动画效果
@keyframes可将图片进行轮播
transform: translate(0, -5px);当鼠标放在图片上时可向上凸出
运用绝对定位将左侧位置一直固定，右侧使用相对运用top和left调整位置
BUG:轮播图也可以通过按键变化图片，多按几次后好像变化的图片为一张
效果图
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" type="text/css" href="./starbucks.css" /><script src="./statbucks.js"></script></head><body><div class="left"><!-- banner --><div class="banner"><a href="#"><imgclass="img1"src="https://www-static./prod/assets/images/logo.svg"alt=""/></a><div><ul><li><a href="">门店</a></li><li><a href="">我的账户</a></li><li><a href="">菜单</a></li></ul></div><a href="#"><imgclass="img2"src="https://www-static./prod/assets/icons/icon-hamburger.svg"alt=""/></a></div><!-- 心情惬意 --><div class="title"><span>心情惬意，来杯咖啡吧 ☕</span></div><!-- 登录注册 --><div class="register"><a href="#"><imgsrc="/assets/icons/icon-account.svg"alt=""/><span>登录</span></a><a href="#"><span class="s1">注册</span></a></div></div><!-- banner图片 --><div class="right"><div class="img"><imgclass="lun"src="/banners-homepage-banner/main_9b62183b-633a-4dc1-a4a6-627a22cca859.png"alt=""/><imgclass="lun"src="/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg",alt=""/><button type="button" class="button">></button><span>广告</span></div></div><!-- 三张小图 --><div class="three"><div><a href="#"><imgsrc="https://www-static./prod/images/pages/tmall--06-29-zh.jpg"alt=""/></a></div><div><a href="#"><imgsrc="https://www-static./prod/images/pages/starbucks-design-studio-web-china.jpg"alt=""/></a></div><div><a href="#"><imgsrc="https://www-static./prod/images/pages/homepage-career-cn.jpg"alt=""/></a></div></div><!-- 星享俱乐部 --><div class="star"><div><h2>星享俱乐部</h2><p>开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<aclass="more"href="#">了解更多 ›</a></p><p><a href="#">注册</a> <a href="#">登录</a></p></div><div><imgsrc="https://www-static./prod/assets/images/logo-msr-0601.svg"alt=""/></div></div><!-- 星巴克精选 --><div class="choice"><h2>星巴克精选</h2><p>在星巴克天猫旗舰店发现更多咖啡心意</p><ul><li><a href="#"><imgsrc="https://www-static./prod/assets/images/homepage/tmall-card-01-update.png"alt=""/><p>会员星礼包</p><p>星享卡新升级<br />更多心意好礼</p><p>了解更多 ›</p></a></li><li><a href="#"><imgsrc="https://www-static./prod/assets/images/homepage/tmall-card-02.png"alt=""/><p>星礼卡</p><p>用一份心礼<br />让心意相随</p><p>了解更多 ›</p></a></li><li><a href="#"><imgsrc="https://www-static./prod/assets/images/homepage/tmall-eticket.png"alt=""/><p>电子产品券</p><p>心意<br />从这一杯开始</p><p>了解更多 ›</p></a></li><li><a href="#"><imgsrc="https://www-static./prod/assets/images/homepage/tmall-reserve.png"alt=""/><p>咖啡生活</p><p>星巴克<br />用心制作</p><p>了解更多 ›</p></a></li></ul></div><!-- 1912派克街 --><div class="last"><h2>1912 派克街 | 咖啡星讲堂</h2><p>了解更多星巴克咖啡文化</p><div><a href="#"><divstyle="background-image: url(https://www-static./prod/assets/images/homepage/coffeehouse-coffee-cultivation-kv.jpg);"></div><span>咖啡知识</span><span>咖啡的起源与培植</span></a><a href="#"><divstyle="background-image: url(https://www-static./prod/assets/images/homepage/coffeehouse-4-fundamentals-kv.jpg);"></div><span>咖啡品鉴</span><span>咖啡调制</span></a><a href="#"><divstyle="background-image: url(https://www-static./prod/assets/images/homepage/coffeehouse-roast-story-kv.jpg);"></div><span>咖啡知识</span><span>咖啡烘焙</span></a></div><div class="end"><a href="#"><imgsrc="https://www-static./prod/assets/images/icpicon.png"/>沪公网安备 31010402000253号 </a>|<a href="#">沪ICP备17003747号</a></div></div></body></html>
CSS
* {margin: 0;padding: 0;}.left {position: fixed;top: 0;float: left;height: 570px;width: 380px;/* font-size: 48px; */background-color: rgb(255, 255, 255);}.banner {padding: 24px;width: 328px;height: 48px;}.left .banner .img1 {float: left;width: 36px;height: 36px;}.left .banner .img2 {float: right;width: 24px;height: 24px;/* background-color: #fff; */margin-top: 6px;/* line-height: 24px; */}.left .banner div {float: left;width: 196px;height: 36px;/* background-color: #fff; */margin-left: 20px;line-height: 36px;}.left .banner li {float: left;padding-right: 10px;/* padding: 10px 5px; */list-style: none;}.left .banner li a {text-decoration: none;font-weight: 700;font-size: 16px;color: black;}.left .title {width: 320px;margin: auto;margin-top: 150px;font-size: 24px;font-weight: 700;/* background-color: aliceblue; */}.register {width: 200px;height: 50px;margin-left: 20px;margin-top: 20px;/* background-color: #fff; */}.register a {float: left;color: rgb(0, 168, 98);text-decoration: none;margin-left: 20px;}.register img {float: left;height: 30px;margin-right: 5px;}.register span {height: 28px;float: left;text-align: center;line-height: 28px;font-weight: 500;}.register .s1 {width: 51px;border: 1px solid rgb(0, 168, 98);border-radius: 40px;text-align: center;}/* .right {position: absolute;left: 380px;float: left;background-color: antiquewhite;width: 880px;height: 414px;overflow: hidden;} *//* .img {width: 1760px;animation: a 5s infinite 1s paused;}.img > img {position: relative;float: left;max-width: 880px;} */.right {position: relative;left: 380px;width: 880px;/* height: 414px; */overflow: hidden;}.img {width: 1760px;animation: a 4s infinite 1s normal;}.img > img {position: relative;float: left;max-width: 880px;}@keyframes a {50% {margin-left: 0px;}100% {margin-left: -880px;}}.img .button {position: absolute;right: 20px;top: 50%;font-size: 64px;color: aliceblue;border: none;background-color: rgba(253, 253, 253, 0);}.img span {position: absolute;right: 10px;top: 10px;width: 30px;text-align: center;font-size: 12px;color: rgb(125, 136, 133);background-color: rgb(12, 23, 20);}.three {position: relative;width: 880px;height: 210px;left: 380px;/* top: 414px; */background-color: rgb(247, 247, 247);}.three div {float: left;margin-top: 20px;margin-left: 20px;background-color: rgb(0, 0, 0);}.three img {max-width: 260px;}.three div:hover {transform: translate(0, -5px);}.star {position: relative;/* top: 414px; */left: 380px;width: 880px;height: 220px;/* background-color: rgb(165, 50, 50); */}.star div:nth-child(1) {float: left;width: 350px;height: 180px;margin-top: 30px;margin-left: 100px;/* background-color: #fff; */}.star div:last-child {float: right;width: 250px;height: 80px;margin-top: 80px;margin-right: 80px;/* background-color: #fff; */}.star h2 {font-size: 22px;font-weight: 400;}.star p {margin-top: 20px;color: rgb(112, 112, 112);}.star .more {font-weight: 500;color: rgb(194, 166, 97);border: none;padding: 0;}.star div:nth-child(1) p:last-child {margin-top: 40px;}.star p a {padding: 5px 10px;margin-left: 10px;font-weight: 500;color: rgb(0, 168, 98);text-decoration: none;border: 1px solid rgb(0, 168, 98);border-radius: 40px;}.choice {position: relative;/* top: 414px; */left: 380px;width: 880px;height: 370px;background-color: rgb(247, 247, 247);/* cbackground-color: rgb(165, 50, 50); */}.choice p {width: 280px;margin: auto;color: rgb(108, 108, 108);}.choice ul li a p {width: 140px;margin-top: 10px;text-align: center;color: rgb(102, 102, 102);font-size: 14px;font-weight: 400;}.choice ul li a p:nth-child(2) {margin-top: 30px;color: black;font-size: 16px;font-weight: 700;/* background-color: rgb(236, 230, 230); */}.choice ul li a p:last-child {margin-bottom: 10px;color: rgb(194, 166, 97);font-size: 12px;}.choice h2 {width: 110px;height: 30px;margin: auto;padding: 25px;font-size: 22px;font-weight: 400;}.choice ul {background-color: rgb(192, 94, 94);width: 700px;margin-left: 120px;margin-top: 60px;}.choice ul li {float: left;width: 140px;height: 180px;box-shadow: 0 1px 1px 1px rgb(0 0 0 / 12%);border-radius: 2px;margin-right: 20px;list-style: none;}.choice ul li:hover {transform: translate(0, -5px);/* box-shadow: 1px 1px 1px 1px rgb(0 0 0 0 / 12%); */}.choice ul li a {/* width: 140px;height: 180px; */position: relative;text-decoration: none;}.choice ul li a img {position: absolute;top: -30px;left: 32px;max-height: 60px;}.last {position: relative;/* top: 414px; */left: 380px;width: 880px;height: 500px;/* background-color: rgb(252, 205, 205); */}.last > h2 {padding: 30px 0;text-align: center;font-size: 22px;font-weight: 400;}.last > p {text-align: center;color: rgb(111, 111, 111);}.last > div:nth-child(3) > a {position: relative;float: left;height: 230px;margin-left: 25px;margin-top: 50px;text-decoration: none;color: black;/* border: rgb(102, 102, 102) 1px solid; */border-radius: 2px;box-shadow: 0 1px 1px 1px rgb(0 0 0 / 12%);}.last a:hover {transform: translate(0, -5px);}.last a span:nth-child(2) {position: absolute;top: 5px;width: 80px;height: 30px;text-align: center;line-height: 30px;background-color: rgb(194, 166, 97);color: aliceblue;}.last a span:nth-child(3) {display: inline-block;margin-top: 10px;margin-left: 10px;/* background-color: #fff; */}.last > div > a > div {width: 260px;height: 180px;background-size: 260px 180px;}.last > div {float: left;margin: auto;padding: auto;}.last div:last-child {width: 500px;height: 30px;margin-top: 40px;margin-left: 200px;text-align: center;line-height: 30px;font-size: 14px;/* background-color: #fff; */color: rgb(102, 102, 102);}.last .end a {text-decoration: none;color: rgb(102, 102, 102);}.last .end a img {height: 14px;width: 14px;}
JS
window.onload = function () {var index = 0;var img_data = ["/banners-homepage-banner/main_9b62183b-633a-4dc1-a4a6-627a22cca859.png","/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg",];var bu = document.getElementsByClassName("button")[0];var im = document.getElementsByClassName("lun")[0];bu.onclick = function () {// alert("dw");index++;if (index == img_data.length) {index = 0;}im.setAttribute("src", img_data[index]);};};
