利用css来制作轮播图

最新推荐文章于 2024-05-10 08:50:53 发布

maowei-2001

最新推荐文章于 2024-05-10 08:50:53 发布

阅读量5.3k

点赞数 6

分类专栏：只是兴趣文章标签： css html5

本文链接：https://blog.csdn.net/m0_59246072/article/details/123756040

版权

只是兴趣专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（1）现在每个网页上都有轮播图，那么该怎么去制作呢？

（2）给大家推荐一个轮播图的网站

swiper------------->Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

(3)那么我们怎么利用css去制作轮播图呢？

（4）分析一下吧

（1）给大家一个小提示，label标签中的for属性 和 input的id属性是可以绑定的哟

（2）那么怎么将其联系到一起呢？------这要用到checked属性

（3）因为他是左右的移动，我们可以利用css3的新特性-----transform：translateX()

（5）分享一下代码吧

<div class="box2">
			<div class="main">
				<input type="radio" name="button" id="but1" checked="checked" />
				<label for="but1" style="--i:1"></label>
				<div class="image">
					<img src="img/1.png">
					<div class="title">
						<h1>龙</h1>
						<p>龙能大能小，能升能隐：大则兴云吐雾，小则隐介藏形；升则飞腾于宇宙之间，隐则潜伏于波涛之内。方今春深，龙乘时变化，犹人得志而纵横四海，龙之为物，可比世之英雄”“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。”</p>
					</div>
				</div>
			</div>

			<div class="main">
				<input type="radio" name="button" id="but2" checked="checked" />
				<label for="but2" style="--i:2"></label>
				<div class="image">
					<img src="img/2.png">
					<div class="title">
						<h1>马</h1>
						<p>马，这豪迈而剽悍的动物，它象征着威武，无畏的精神，但它却被人类所征服，默默付出，当主人需要它的时候，它慷慨以赴，为主人的成功兴奋鼓舞，却不问回报，当主人不满时，它便窥伺人的表情，它一切的行动都为主人的意愿。</p>
					</div>
				</div>
			</div>

			<div class="main">
				<input type="radio" name="button" id="but3" checked="checked" />
				<label for="but3" style="--i:3"></label>
				<div class="image">
					<img src="img/3.png">
					<div class="title">
						<h1>狮</h1>
						<p>谁，唤我之心，掩我一生凌轹。
							谁，弃我而去，留我一世独殇；谁，可明我意，使我此生无憾；谁，可助我臂，纵横万载无双；谁，可倾我心，寸土恰似虚弥； 谁，可葬吾怆，笑天地虚妄，吾心狂。
							伊，覆我之唇，祛我前世流离； 伊，揽我之怀，除我前世轻浮。
							执子之手，陪你痴狂千生；深吻子眸，伴你万世轮回。</p>
					</div>
				</div>

			</div>

			<div class="main">
				<input type="radio" name="button" id="but4" checked="checked" />
				<label for="but4" style="--i:4"></label>
				<div class="image">
					<img src="img/4.png">
					<div class="title">
						<h1>鹤</h1>
						<p>我命由我不由天，天欲灭我我灭天。
							天若有情天亦老，人若有情死得早！
							累么？累就对了，舒服是留给死人的。
							当某人装酷时，姐都会低下头，不是姐害羞，姐是在找砖头！
							宁可牺牲中国最后一个处男，决不留下日本任何一个处nv！
							老鼠扛刀，满街找猫。
							你今天流的汗和泪，都是你当初脑子进了水……</p>
					</div>
				</div>

			</div>


			<div class="main">
				<input type="radio" name="button" id="but5" checked="checked" />
				<label for="but5" style="--i:5"></label>
				<div class="image">
					<img src="img/5.png">
					<div class="title">
						<h1>狼</h1>
						<p>一个狼群就是一支训练有素，纪律严明的部队，统一行动，绝对服从，协同作战，这就是狼的纪律。
							一只狼可以捕获一只羊，一百只狼却可以屠杀一万只羊。双拳难敌四手，恶虎敌不过群狼。
							狼的咆哮不会因为狗的吠叫而销声匿迹。
							野心勃勃才是狼的本色。只有狗才逆来顺受，才安于现状。
							能温暖一匹独狼的，不是狼群，而是另一匹独狼。
							狼，是我们的榜样，狼的生存之道就是一个字，够狠，所以永远记住站在你面前的比你狠，要想超越，那你就要比他更狠。</p>
					</div>
				</div>

			</div>


			<div class="main">
				<input type="radio" name="button" id="but6" checked="checked" />
				<label for="but6" style="--i:6"></label>
				<div class="image">
					<img src="img/6.png">
					<div class="title">
						<h1>凤</h1>
						<p>火焰渐渐褪去,露出了一个巨大的身影， 一只火红色地大鸟翱翔于半空之中。
							炫丽的火红色尾羽,完美的体态,无不彰显着他鸟中之王地威仪。
							晶莹中带着一些红色的血丝一般腾起，冲天而起的凤凰火焰眨眼间已经密布于天空之中。
							庞大的火焰冲天而起，嘹亮的凤鸣声也随之爆发开来。
							炫丽的凤凰火焰划破夜空，几乎照亮了整座海神山，伴随着升腾，火焰渐渐褪去，露出了一个巨大的身影。
							一只火红色地大鸟翱翔于半空之中。
							炫丽的火红色尾羽，完美的体态，无不彰显着他鸟中之王地威仪。</p>
					</div>
				</div>

			</div>


			<div class="main">
				<input type="radio" name="button" id="but7" checked="checked" />
				<label for="but7" style="--i:7"></label>
				<div class="image">
					<img src="img/7.png">
					<div class="title">
						<h1>鹿</h1>
						<p>不是路不平，而是你不行。
							幸福对我说，你还太小。
							别逼我，否则我伟大起来，一发不可收拾。
							孤独的人常表现得很坚强;寂寞的人则多半温和。
							从天堂到地狱，我只是路过人间。
							真心离伤心最近。
							大笑是绽放的微笑。
							旅行就是从自己呆腻的地方到别人呆腻的地方去。
							天生落魄，五行缺钱。
							老子仰着头，那是落枕了。
							女人，活的自在一些，要让别人瞧得起。
							没有你的日子里太阳依旧升起
							人又不聪明，还学别人秃顶。
							我以神的姿态,闪耀在这美的瞬间</p>
					</div>
				</div>

			</div>
		</div>

*{
	margin: 0;
	padding: 0;
}
body{
	width: 100vw;
	height: 100vh;
	font-size: 0.15rem;
	background-color: rgb(44,62,80);
}


.box2{
	position: relative;
	width: 1230px;
	height: 670px;
	margin: 20px auto;
	overflow: hidden;
	box-shadow: 10px 10px 99px 6px rgba(1,2,3,1);
}
.box2::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: rgba(255,255,255,.5);
	bottom: 50px;
	z-index: 11;
}
.box .main{
	position: absolute;
	top: 0;
	left: 0;
	width: 1230px;
	height: 670px;

	
}

label{
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: rgba(255,255,255,.3);
	cursor: pointer;
	bottom: 35px;
	border-radius: 50%;
	left: calc((var(--i) - 1) * 120px + 210px);
	transition: all 1s;
	z-index: 12;
	
}
label:hover{
	background-color: rgba(255,255,255,.7);
}

input[type=radio] {
    transform : translateY(-900px);
    opacity: 0;
}

input[type=radio]:checked+label{
	background-color: #fff;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .5);
}
.image{
	position: absolute;
	top: 0;
	left: 0;
	width: 1230px;
	height: 670px;
}
.image img{
	position  : absolute;
	transform : translateX(1230px);
	transition: all .5s;
}
input[type=radio]:checked~.image img {
    transform: translateX(0px);
    z-index  : 9;
}
.image .title{
	position: relative;
	width: 300px;
	height: 670px;
	background-color: rgba(255,254,253,.1);
	z-index: 10;
	float: right;
	left: 0;
	transform: translateX(300px);
	transition: all .5s;
}


@font-face {
	font-family:wocao;
	src: url(font/1234.ttf);
}

.image .title h1{
	text-align: center;
	width: 300px;
	height: 60px;
	margin: 20px 0 20px 0;
	color: rgb(201,197,195);
	font-family:wocao;
	font-size: 50px;
}
.image .title p{
	text-indent: 2em;
	font-size: 20px;
	color: rgb(201,197,195);
	font-weight: 300;
	font-family:wocao;
}


input[type=radio]:checked~.image .title{
    transform: translateX(0px);

}

（6）图片的话：大家可以自己去找一下

（7）推荐一个图片的网站----站酷 (ZCOOL) - 设计师互动平台 - 打开站酷，发现更好的设计！

（8）给大家展示一下样图吧