完整源码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>片单UI设计 </title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.0/swiper-bundle.css"
/>
<link
rel="stylesheet"
href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-SemiBold/result.css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="swiper-box">
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<!--一个框为一部影片的海报-->
<div class="swiper-slide">
<img src="img/战狼2.jpg" alt="" />
<div class="overlay">
<h2>战狼2</h2>
</div>
</div>
<div class="swiper-slide">
<img src="img/八百.jpg" alt="" />
<div class="overlay">
<h2>八百</h2>
</div>
</div>
<div class="swiper-slide">
<img src="img/流浪地球.jpg" alt="" />
<div class="overlay">
<h2>流浪地球</h2>
</div>
</div>
<div class="swiper-slide">
<img src="img/烈火英雄.jpg" alt="" />
<div class="overlay">
<h2>烈火英雄</h2>
</div>
</div>
<div class="swiper-slide">
<img src="img/长泾湖.jpg" alt="" />
<div class="overlay">
<h2>长津湖</h2>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper sub-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide subbg">
<h1>战狼2</h1>
<div class="year">
<span class="tag">年份</span>
<span>2017</span>
</div>
<div class="actor">
<span class="tag">主演</span>
<span>吴京/弗兰克·格里罗/卢靖姗</span>
</div>
<div class="cate">
<span class="tag">地区</span>
<span>中国·动作 / 军事</span>
</div>
<div class="time">
<span class="tag">时长</span>
<span>2 小时 3分</span>
</div>
<div class="describ">
<span>
该片讲述了脱下军装的冷锋被卷入了一场非洲国家的叛乱，本来能够安全撤离的他无法忘记军人的职责，重回战场展开救援的故事.
</span>
</div>
</div><!--一个框为一部影片的信息-->
<div class="swiper-slide subbg">
<h1>八百</h1>
<div class="year">
<span class="tag">年份</span>
<span>2020</span>
</div>
<div class="actor">
<span class="tag">主演</span>
<span>欧豪 / 张译</span>
</div>
<div class="cate">
<span class="tag">地区</span>
<span>中国·战争 / 冒险</span>
</div>
<div class="time">
<span class="tag">时长</span>
<span>2 小时 27 分</span>
</div>
<div class="describ">
<span class="">
1937年淞沪会战末期，中日双方激战已持续三个月，上海濒临沦陷。第88师262旅524团团副谢晋元率420余人，孤军坚守最后的防线，留守上海四行仓库 。与租界一河之隔，造就了罕见的被围观的战争。为壮声势，实际人数四百人而对外号称八百人 。“八百壮士”奉命留守上海闸北，在苏州河畔的四行仓库鏖战四天，直至10月30日才获令撤往英租界。
</span>
</div>
</div>
<div class="swiper-slide subbg">
<h1>流浪地球</h1>
<div class="year">
<span class="tag">年份</span>
<span>2019</span>
</div>
<div class="actor">
<span class="tag">主演</span>
<span>吴京 / 赵今麦</span>
</div>
<div class="cate">
<span class="tag">地区</span>
<span>中国·科幻 / 灾难 / 冒险</span>
</div>
<div class="time">
<span class="tag">时长</span>
<span>2小时17分</span>
</div>
<div class="describ">
<span class="">
近年来，科学家们发现太阳急速衰老膨胀，短时间内包括地球在内的整个太阳系都将被太阳所吞没。为了自救，人类提出一个名为“流浪地球”的大胆计划，即倾全球之力在地球表面建造上万座发动机和转向发动机，推动地球离开太阳系，用2500年的时间奔往新家园。中国航天员刘培强（吴京饰）在儿子刘启四岁那年前往领航员空间站，和国际同侪肩负起领航者的重任。转眼刘启（屈楚萧 饰）长大，他带着妹妹韩朵朵（赵今麦 饰）偷偷跑到地表，偷开外公韩子昂（吴孟达 饰）的运输车，结果不仅遭到逮捕，还遭遇了全球发动机停摆的事件。为了修好发动机，阻止地球与木星相撞，全球开始展开饱和式营救，连刘启他们的车也被强征加入。在与时间赛跑的过程中，无数的人前仆后继，奋不顾身，只为延续百代子孙生存的希望。
</span>
</div>
</div>
<div class="swiper-slide subbg">
<h1>烈火英雄</h1>
<div class="year">
<span class="tag">年份</span>
<span>2019</span>
</div>
<div class="actor">
<span class="tag">主演</span>
<span> 黄晓明/ 杜江</span>
</div>
<div class="cate">
<span class="tag">地区</span>
<span>中国 / 剧情 / 灾难 </span>
</div>
<div class="time">
<span class="tag">时长</span>
<span>2小时00分</span>
</div>
<div class="describ">
<span class="">
一场滨海城市石油码头的管道爆炸，牵连了整个原油储存区，一座储油量高达10万立方米的储油罐已经爆炸并且泄露，泄露的原油随时可能引爆临近的油罐，火灾不断升级，爆炸接连发生，然而这还都不是最恐怖的，火场不远处伫立的危险化学物储藏区，像跃跃欲试的魔鬼等待着被点燃，刹那便能带走几百万人的生命，威胁全市、全省，甚至邻国的安全。在这样的危难时刻，一批批消防队员告别家人，赶赴火场.
</span>
</div>
</div>
<div class="swiper-slide subbg">
<h1>长津湖</h1>
<div class="year">
<span class="tag">年份</span>
<span>2021</span>
</div>
<div class="actor">
<span class="tag">主演</span>
<span>吴京 / 欧豪</span>
</div>
<div class="cate">
<span class="tag">地区</span>
<span>中国 / 剧情·历史 / 战争</span>
</div>
<div class="time">
<span class="tag">时长</span>
<span>2 小时 56分</span>
</div>
<div class="describ">
<span class="">
1950年，中国人民志愿军部队与美军在朝鲜长津湖地区交战，中国人民志愿军第9兵团将美军1个多师分割包围于长津湖地区，歼敌1.3万余人，扭转了战场势态。这次战役收复了三八线以北的东部广大地区，是扭转局势的关键一战，而中国人民志愿军也付出了惨痛的牺牲，在零下三十多摄氏度的极端天气中，很多先烈是以端着枪的姿势被冻僵，体现了志愿军战士服从命令、视死如归，冻成冰雕也不退缩的革命精神。
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.0/swiper-bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>CSS:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #65805e;
font-family: Arial, Helvetica, sans-serif;
}
.swiper-box{
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
background: linear-gradient(180deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0) 100%);
backdrop-filter: blur(30px);
border-radius: 20px;
box-shadow: 0 0.5px 0 1px rgba(255,255,255,0.23) inset,0 1px 0 0 rgba(255,255,255,0.66) inset,0 4px 16px rgba(0,0,0,0.12);
z-index: 10;
padding: 10px 30px;
}
.swiper{
width: 210px;
height: 300px;
padding: 20px;
}
.swiper-slide{
position: relative;
border-radius: 10px;
user-select: none;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.swiper-slide img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.sub-swiper{
width: 320px;
}
.subbg{
display: grid;
gap: 10px;
box-shadow: none;
}
h1{
color: #fff;
margin-bottom: 5px;
font-family: 'Maple Mono CN SemiBold',serif;
font-weight: 400;
}
.year,
.actor,
.cate,
.time{
display: flex;
align-items: center;
gap: 15px;
color: #292626;
}
.tag{
color: #fff;
padding: 1px 7px;
font-size: 13px;
border-radius: 5px;
}
.describ{
height: 100px;
overflow: auto;
font-size: 15px;
color: #d6d5d5;
/*其他隐藏滚动条*/
-ms-overflow-style: none;
scrollbar-width: none;
}
/*chrome隐藏滚动条*/
.describ::-webkit-scrollbar{
display: none;
}
/*遮罩层*/
.overlay{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top,#0f2027,transparent,transparent);
background-repeat: no-repeat;
background-size: cover;
}
.overlay h2{
position: absolute;
bottom: 0;
left: 0;
color: #fff;
font-weight: 400;
font-size: 1.1rem;
line-height: 1.4;
margin: 0 0 20px 20px;
}
.swiper-pagination{
transform: translateY(10px);
}JS:
//swiper js库，轮播图
const subSwiper = new Swiper(".sub-swiper", {
allowTouchMove: false, // 禁止触摸滑动
loop: true,
effect: "fade",//切换动画
fadeEffect: {
crossFade: true // 开启交叉淡入淡出
},
});
const mainSwiper = new Swiper(".main-swiper", {
effect: "cards",//卡片效果
grabCursor: true,//鼠标滑动显示小手
initialSlide: 2,//初始化时显示第几张图片，0是第一张
loop: true,//无限循环
mousewheel: { //鼠标滑动切换
invert: false,
},
pagination: {
el: ".swiper-pagination",
},
//自动轮播
autoplay: {
delay: 3000, // 间隔3秒
disableOnInteraction: false, //操作后停止自动播放
},
thumbs: {
swiper: subSwiper,
},
});
//通过类名获取所有元素
const coloritems = document.querySelectorAll('.tag');
//定义颜色组
const colors = ["#f35a5a","#f89e37","#3a77fa","#27c263"];
//按组循环赋予颜色
coloritems.forEach((element,index)=>{
const colorindex = index % colors.length;
element.style.backgroundColor = colors[colorindex];
});