实现一个好看通用且响应式布局，自适应的登录/注册页面
提示：以下是本篇文章正文内容，下面案例可供参考
一、页面设计？
页面设计了一个滑动的效果，一个盒子里一边为登录一边为注册，然后中间有一个遮挡盒子，遮挡盒子通过左右滑动，实现显示登录页面还是注册页面。然后登录与注册的表单输入里添加了一个blur事件，label与input好像存在一种里外的错觉感，十分吸引人。然后给整个页面添加了@media 实现了响应式布局。并且轮播图和它的文字也采用了动画的效果。轮播图按钮通过jsdata-value绑定属性 使下面按钮与轮播图相对应。
效果图:
当我们点击上面的sign in or sign up 时，遮挡盒子通过左右滑动，实现显示登录页面还是注册页面
二、页面整体布局
以下是对整个页面布局的解释：
-
代码包含一个
<main>标签，表示页面的主要内容。 -
表单部分包含两个
<form>标签，分别是登录表单和注册表单。 -
每个表单都包含一个
<div>标签，用于包含表单的各个元素。 -
每个表单都包含一个
<div>标签，用于包含表单的标题和切换按钮。 -
每个表单都包含一个
<div>标签，用于包含表单的实际输入字段。 -
每个表单都包含一个
<input>标签，用于提交表单。 -
每个表单都包含一个
<p>标签，用于包含其他相关信息，例如忘记密码链接和服务条款。 -
轮播图部分包含一个
<div>标签，用于包含轮播图的所有元素。 -
轮播图部分包含一个
<div>标签，用于包含轮播图的图片和文本。 -
轮播图部分包含一个
<div>标签，用于包含轮播图的小圆点。 -
轮播图部分包含三个
<img>标签，用于显示轮播图的图片。 -
轮播图部分包含一个
<h2>标签，用于显示轮播图的文本。
总之，这段代码是一个简单的登录和注册表单以及轮播图的示例，可以用于Web开发中的登录和注册页面
<body>
<!-- 这是一个包含登录和注册表单的主要区域 -->
<main>
<!-- 包含登录和注册表单的容器 -->
<div class="box">
<!-- 包含登录和注册表单的内部容器 -->
<div class="inner-box">
<!-- 包含登录和注册表单的表单容器 -->
<div class="forms-wrap">
<!-- 登录表单 -->
<form action="index.html" autocomplete="off" class="sign-in-form">
<!-- 包含网站logo的容器 -->
<div class="logo">
<h4>前端学习</h4>
</div>
<!-- 包含标题和切换注册表单的链接的容器 -->
<div class="heading">
<h2>欢迎回来</h2>
<h6>Not registered yet?</h6>
<a href="#" class="toggle">Sign up</a>
</div>
<!-- 包含输入字段和提交按钮的容器 -->
<div class="actual-form">
<!-- 包含用户名输入字段的容器 -->
<div class="input-wrap">
<input id="name" type="text" minlength="4" autocomplete="off" required
class="input-field">
<label for="name">Name</label>
</div>
<!-- 包含密码输入字段的容器 -->
<div class="input-wrap">
<input id="password" type="password" autocomplete="off" required class="input-field">
<label for="password">Password</label>
</div>
<!-- 登录表单的提交按钮 -->
<input type="submit" value="SIGN IN" class="sign-btn">
<!-- 忘记密码的链接 -->
<p class="text">忘记密码?
<a href="#">获取帮助</a>
</p>
</div>
</form>
<!-- 注册表单 -->
<form action="index.html" autocomplete="off" class="sign-up-form">
<!-- 包含网站logo的容器 -->
<div class="logo">
<!-- <img src="" alt=""> -->
<h4>前端学习</h4>
</div>
<!-- 包含标题和切换登录表单的链接的容器 -->
<div class="heading">
<h2>注册</h2>
<h6>Already have an account?</h6>
<a href="#" class="toggle">Sign In</a>
</div>
<!-- 包含输入字段和提交按钮的容器 -->
<div class="actual-form">
<!-- 包含用户名输入字段的容器 -->
<div class="input-wrap">
<input id="sign-name" type="text" minlength="4" autocomplete="off" required
class="input-field">
<label for="sign-name">Name</label>
</div>
<!-- 包含电子邮件输入字段的容器 -->
<div class="input-wrap">
<input id="sign-email" type="email" autocomplete="off" required class="input-field">
<label for="sign-email">Email</label>
</div>
<!-- 包含密码输入字段的容器 -->
<div class="input-wrap">
<input id="sign-password" type="password" autocomplete="off" required
class="input-field">
<label for="sign-password">Password</label>
</div>
<!-- 注册表单的提交按钮 -->
<input type="submit" value="SIGN IN" class="sign-btn">
<!-- 同意服务条款和隐私协议的复选框 -->
<p class="text"> <input type="checkbox" name="" id="">注册前我已阅读并同意
<a href="#">服务条款</a>和<a href="#">隐私协议</a>
</p>
</div>
</form>
</div>
<!-- 包含轮播图的容器 -->
<div class="carousel">
<!-- 包含轮播图图片的容器 -->
<div class="images-wrapper">
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/68ff62863bb9fd90d6fd874802e08568.mp4.jpg"
class="image img-1 show" alt="">
<img src="https://wallpaper-static.cheetahfun.com/wallpaper/sites/scifi/pic5.jpg" alt=""
class="image img-2">
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8bc682fba0a8747155409b3bbc2676ac.mp4.jpg"
alt="" class="image img-3">
</div>
<!-- 包含轮播图文本和轮播图指示器的容器 -->
<div class="text-slider">
<!-- 包含轮播图文本的容器 -->
<div class="text-wrap">
<div class="text-group">
<h2>开始你的学习旅程</h2>
<h2>准备创造奇迹吧</h2>
<h2>学习是一切创建力的开始</h2>
</div>
</div>
<!-- 包含轮播图指示器的容器 -->
<div class="bullets">
<span class="active" data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="./app.js"></script>
</body>
三，样式设置
在整个页面样式布局里，我们主要采用flex弹性布局和grid布局。然后通过定位实现我们所在的位置。在这个页面里我们使用translate动画进行移动，采用left right进行布局分布。
/* 重置所有元素的内边距、外边距和盒模型为border-box */
*, *::after, *::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 设置页面背景颜色、字体颜色和背景图片 */
body {
color: #fff; /* 设置字体颜色为白色 */
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0); /* 设置背景图片 */
background-repeat: no-repeat; /* 设置背景图片不重复 */
background-size: cover; /* 设置背景图片覆盖整个页面 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* 设置字体 */
}
/* 设置主要区域的样式 */
main {
width: 100%; /* 设置主要区域的宽度为100% */
overflow: hidden; /* 隐藏主要区域的溢出内容 */
min-height: 100vh; /* 设置主要区域的最小高度为视口高度 */
padding: 2rem; /* 设置主要区域的内边距为2rem */
display: flex; /* 将主要区域的子元素设置为flex布局 */
align-items: center; /* 在主轴上居中对齐子元素 */
justify-content: center; /* 在交叉轴上居中对齐子元素 */
}
/* 设置.box的样式 */
.box {
width: 100%; /* 设置.box的宽度为100% */
max-width: 1020px; /* 设置.box的最大宽度为1020px */
height: 640px; /* 设置.box的高度为640px */
background-image: url(https://img.zcool.cn/community/01ff625e12cf12a80121651816523c.gif); /* 设置.box的背景图片 */
background-repeat: no-repeat; /* 设置.box的背景图片不重复 */
background-size: cover; /* 设置.box的背景图片覆盖整个区域 */
position: relative; /* 设置.box的定位为相对定位 */
border-radius: 3.3rem; /* 设置.box的圆角半径为3.3rem */
box-shadow: 0 0 20px #b7b2a9; /* 设置.box的阴影效果 */
}
/* 设置.inner-box的样式 */
.inner-box {
position: absolute; /* 设置.inner-box的定位为绝对定位 */
width: calc(100% - 4.1rem); /* 设置.inner-box的宽度为100%减去4.1rem */
height: calc(100% - 4.1rem); /* 设置.inner-box的高度为100%减去4.1rem */
top: 50%; /* 设置.inner-box的顶部距离为50% */
left: 50%; /* 设置.inner-box的左侧距离为50% */
transform: translate(-50%, -50%); /* 设置.inner-box的位置为居中 */
}
/* 设置.forms-wrap的样式 */
.forms-wrap {
position: absolute; /* 设置.forms-wrap的定位为绝对定位 */
height: 100%; /* 设置.forms-wrap的高度为100% */
width: 45%; /* 设置.forms-wrap的宽度为45% */
left: 0; /* 设置.forms-wrap的左侧距离为0 */
top: 0; /* 设置.forms-wrap的顶部距离为0 */
display: grid; /* 将.forms-wrap的子元素设置为grid布局 */
grid-template-columns: 1fr; /* 设置.forms-wrap的列数为1 */
grid-template-rows: 1fr; /* 设置.forms-wrap的行数为1 */
transition: 0.8s ease-in-out; /* 设置.forms-wrap的过渡效果 */
}
/* 设置form的样式 */
form {
max-width: 260px; /* 设置form的最大宽度为260px */
width: 100%; /* 设置form的宽度为100% */
margin: 0 auto; /* 设置form的水平居中 */
height: 100%; /* 设置form的高度为100% */
display: flex; /* 将form的子元素设置为flex布局 */
flex-direction: column; /* 设置form的子元素在垂直方向上排列 */
justify-content: space-evenly; /* 在form的子元素之间均匀分布空间 */
grid-column: 1/2; /* 设置form的列为1到2 */
grid-row: 1/2; /* 设置form的行为1到2 */
transition: opacity 0.02s 0.4s; /* 设置form的过渡效果 */
}
/* 设置.sign-up-form的样式 */
form.sign-up-form {
opacity: 0; /* 设置.sign-up-form的透明度为0 */
pointer-events: none; /* 禁用.sign-up-form的鼠标事件 */
}
/* 设置.logo的样式 */
.logo {
display: flex; /* 将.logo的子元素设置为flex布局 */
align-items: center; /* 在.logo的子元素之间垂直居中 */
}
/* 设置.logo img的样式 */
.logo img {
height: 27px; /* 设置.logo img的高度为27px */
margin-right: .3rem; /* 设置.logo img的右侧外边距为0.3rem */
}
/* 设置.logo h4的样式 */
.logo h4 {
font-size: 1.1rem; /* 设置.logo h4的字体大小为1.1rem */
letter-spacing: 0.5px; /* 设置.logo h4的字母间距为0.5px */
color: #151111; /* 设置.logo h4的字体颜色为#151111 */
}
/* 选择所有具有.heading类的元素下的h2元素 */
.heading h2 {
/* 设置字体大小为2.1rem */
font-size: 2.1rem;
/* 设置字体粗细为600 */
font-weight: 600;
/* 设置字体颜色为#151111 */
color: #151111;
}
/* 选择所有具有.heading类的元素下的h6元素 */
.heading h6 {
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 设置字体粗细为400 */
font-weight: 400;
/* 将元素显示为行内元素 */
display: inline;
/* 设置字体颜色为#bababa */
color: #bababa;
}
/* 选择所有具有.toggle类的元素 */
.toggle {
/* 设置字体颜色为#bbb */
color: #bbb;
/* 设置文本阴影 */
text-shadow:0 0 20px #bababa;
/* 去除文本装饰 */
text-decoration: none;
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 设置字体粗细为500 */
font-weight: 500;
/* 设置过渡效果为0.3秒 */
transition: .3s;
}
/* 当鼠标悬停在.toggle元素上时 */
.toggle:hover {
/* 设置字体颜色为#8371f6 */
color: #8371f6;
}
/* 选择所有具有.input-wrap类的元素 */
.input-wrap {
/* 设置相对定位 */
position: relative;
/* 设置高度为37像素 */
height: 37px;
/* 设置下边距为2rem */
margin-bottom: 2rem;
}
/* 选择所有具有.input-field类的元素 */
.input-field {
/* 设置绝对定位 */
position: absolute;
/* 设置宽度为100% */
width: 100%;
/* 设置高度为100% */
height: 100%;
/* 设置背景为透明 */
background: none;
/* 去除边框 */
border: none;
/* 去除外边框 */
outline: none;
/* 设置底部边框为1像素的实线，颜色为#bbb */
border-bottom: 1px solid #bbb;
/* 去除内边距 */
padding: 0;
/* 设置字体大小为0.95rem */
font-size: 0.95rem;
/* 设置字体颜色为#151111 */
color: #151111;
/* 设置过渡效果为0.4秒 */
transition: 0.4s;
}
/* 选择所有label元素 */
label {
/* 设置绝对定位 */
position: absolute;
/* 设置左侧为0 */
left: 0;
/* 设置顶部为50% */
top: 50%;
/* 将元素向上移动50% */
transform: translateY(-50%);
/* 设置字体大小为0.95rem */
font-size: 0.95rem;
/* 设置字体颜色为#bbb */
color: #bbb;
/* 禁用指针事件 */
pointer-events: none;
/* 设置过渡效果为0.4秒 */
transition: 0.4s;
}
/* 当输入框处于活动状态时 */
.input-field:active {
/* 设置底部边框颜色为#151111 */
border-bottom-color: #151111;
}
/* 当输入框处于活动状态时，其后面的label元素 */
.input-field.active+label {
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 将元素向上移动2像素 */
top: -2px;
}
/* 选择所有具有.sign-btn类的元素 */
.sign-btn {
/* 设置为内联块元素 */
display: inline-block;
/* 设置宽度为100% */
width: 100%;
/* 设置高度为43像素 */
height: 43px;
/* 设置背景颜色为#151111 */
background: #151111;
/* 设置字体颜色为白色 */
color: #fff;
/* 去除边框 */
border: none;
/* 设置光标为手型 */
cursor: pointer;
/* 设置圆角为0.8rem */
border-radius: 0.8rem;
/* 设置下边距为2rem */
margin-bottom: 2rem;
/* 设置过渡效果为0.3秒 */
transition: 0.3s;
}
/* 当鼠标悬停在.sign-btn元素上时 */
.sign-btn:hover {
/* 设置背景颜色为#8371f6 */
background-color: #8371f6;
}
/* 选择所有具有.text类的元素 */
.text {
/* 设置为弹性盒子 */
display: flex;
/* 设置字体颜色为白色 */
color: white;
/* 设置文本阴影 */
text-shadow: 0 0 20px #b7b2a9;
/* 设置字体大小为0.7rem */
font-size: 0.7rem;
}
/* 选择所有.text元素内的a元素 */
.text a {
/* 设置字体颜色为#bbb */
color: #bbb;
/* 设置过渡效果为0.3秒 */
transition: 0.3s;
}
/* 当鼠标悬停在.text元素内的a元素上时 */
.text a:hover {
/* 设置字体颜色为#8371f6 */
color: #8371f6;
}
/* 当处于注册模式下的登录表单 */
main.sign-up-mode form.sign-in-form {
/* 设置透明度为0 */
opacity: 0;
/* 禁用指针事件 */
pointer-events: none
}
/* 当处于注册模式下的注册表单 */
main.sign-up-mode form.sign-up-form {
/* 设置透明度为1 */
opacity: 1;
/* 启用指针事件 */
pointer-events: all
}
/* 当处于注册模式下的表单容器 */
main.sign-up-mode .forms-wrap {
/* 设置左侧位置为55% */
left: 55%;
}
/* 当处于注册模式下的轮播容器 */
main.sign-up-mode .carousel {
/* 设置左侧位置为0% */
left: 0%;
}
/* 选择所有.carousel元素 */
.carousel {
/* 设置圆角为2rem */
border-radius: 2rem;
/* 设置内边距为2rem */
padding: 2rem;
/* 设置为绝对定位 */
position: absolute;
/* 设置溢出隐藏 */
overflow: hidden;
/* 设置高度为100% */
height: 100%;
/* 设置宽度为55% */
width: 55%;
/* 设置左侧位置为45% */
left: 45%;
/* 设置顶部位置为0 */
top: 0;
/* 设置阴影效果 */
box-shadow: 0 0 5px #b7b2a9;
/* 设置背景颜色为透明 */
background-color: transparent;
/* 设置为网格布局 */
display: grid;
/* 设置过渡效果为0.8秒 */
transition: 0.8s ease-in-out;
/* 设置为相对定位 */
position: relative;
/* 设置网格行模板 */
grid-template-rows: auto 1fr;
}
/* 选择所有.images-wrapper元素 */
.images-wrapper {
/* 设置为网格布局 */
display: grid;
/* 设置网格列模板 */
grid-template-columns: 2fr;
/* 设置网格行模板 */
grid-template-rows: 1fr;
}
/* 选择所有.image元素 */
.image {
/* 设置宽度为100% */
width: 100%;
/* 设置网格列为1到2 */
grid-column: 1/2;
/* 设置网格行为1到2 */
grid-row: 1/2;
/* 设置透明度为0 */
opacity: 0;
/* 设置过渡效果 */
transition: opacity 0.3s, transform 0.5s;
}
/* 选择所有.img-1元素 */
.img-1 {
/* 设置向上平移50像素 */
transform: translate(0, -50px);
}
/* 选择所有.img-2元素 */
.img-2 {
/* 设置水平和垂直缩放 */
transform: scale(0.4, 0.5);
}
/* 选择所有.img-3元素 */
.img-3 {
/* 设置缩放和旋转 */
transform: scale(0.3), rotate((-20deg));
}
/* 选择所有具有.show类的.image元素 */
.image.show {
/* 设置透明度为1 */
opacity: 1;
/* 取消所有变换效果 */
transform: none;
}
/* 选择所有.text-slider元素 */
.text-slider {
/* 设置为flex布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
/* 设置主轴方向为垂直 */
flex-direction: column;
}
/* 选择所有.text-wrap元素 */
.text-wrap {
/* 设置最大高度为2.2rem */
max-height: 2.2rem;
/* 超出部分隐藏 */
overflow: hidden;
/* 底部外边距为2.5rem */
margin-bottom: 2.5rem;
}
/* 选择所有.text-group元素 */
.text-group {
/* 设置为flex布局 */
display: flex;
/* 设置主轴方向为垂直 */
flex-direction: column;
/* 文本居中 */
text-align: center;
/* 初始位置为不偏移 */
transform: translateY(0);
/* 过渡效果为0.5秒 */
transition: 0.5s;
}
/* 选择所有.text-group元素下的h2元素 */
.text-group h2 {
/* 设置行高为2.2rem */
line-height: 2.2rem;
/* 设置字体粗细为600 */
font-weight: 600;
/* 设置字体大小为1.6rem */
font-size: 1.6rem;
}
/* 选择所有.bullets元素 */
.bullets {
/* 顶部外边距为20px */
margin-top: 20px;
/* 设置为flex布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
/* 选择所有.bullets元素下的span元素 */
.bullets span {
/* 设置为块级元素 */
display: block;
/* 宽度为0.5rem */
width: 0.5rem;
/* 高度为0.5rem */
height: 0.5rem;
/* 圆角为0.2rem */
border-radius: 0.2rem;
/* 背景颜色为白色 */
background-color: white;
/* 设置阴影 */
box-shadow: 20px #b7b2a9;
/* 左右外边距为0.25rem */
margin: 0 0.25rem;
/* 鼠标指针为手型 */
cursor: pointer;
/* 过渡效果为0.3秒 */
transition: .3s;
}
/* 选择所有.bullets元素下的.active元素 */
.bullets span.active {
/* 宽度为1.1rem */
width: 1.1rem;
/* 背景颜色为aqua */
background-color:aqua;
/* 圆角为1rem */
border-radius: 1rem;
}
/* 当屏幕宽度小于等于850px时生效 */
@media (max-width:850px) {
/* 选择所有.box元素 */
.box {
/* 高度自适应 */
height: auto;
/* 最大宽度为550px */
max-width: 550px;
/* 溢出隐藏 */
overflow: hidden;
}
/* 选择所有.inner-box元素 */
.inner-box {
/* 位置为默认值 */
position: static;
/* 变换为默认值 */
transform: none;
/* 宽度为默认值 */
width: revert;
/* 高度为默认值 */
height: revert;
/* 上下左右内边距为2rem */
padding: 2rem;
}
/* 选择所有.forms-wrap元素 */
.forms-wrap {
/* 位置为默认值 */
position: revert;
/* 宽度为100% */
width: 100%;
/* 高度为100% */
height: 100%;
}
/* 选择所有.form元素 */
.form {
/* 最大宽度为默认值 */
max-width: revert;
/* 上内边距为1.5rem，左右内边距为2.5rem，下内边距为2rem */
padding: 1.5rem 2.5rem 2rem;
/* 过渡效果为0.8秒，缓动函数为ease-in-out，透明度过渡效果为线性 */
transition: transform 0.8s ease-in-out, opacity 0.4s linear;
}
/* 选择所有.heading元素 */
.heading {
/* 上下外边距为2rem，左右外边距为0 */
margin: 2rem 0;
}
/* 选择所有.sign-up-form元素 */
form.sign-up-form {
/* 向右偏移100% */
transform: translateX(100%);
}
/* 选择所有.sign-up-mode元素下的.sign-in-form元素 */
main.sign-up-mode form.sign-in-form {
/* 向左偏移100% */
transform: translateX(-100%);
}
/* 选择所有.sign-up-mode元素下的.sign-up-form元素 */
main.sign-up-mode form.sign-up-form {
/* 不偏移 */
transform: translateX(0%);
}
/* 选择所有.carousel元素 */
.carousel {
/* 位置为默认值 */
position: revert;
/* 高度自适应 */
height: auto;
/* 宽度为100% */
width: 100%;
/* 上下内边距为3rem，左右内边距为2rem */
padding: 3rem 2rem;
/* 设置为flex布局 */
display: flex;
}
/* 选择所有.images-wrapper元素 */
.images-wrapper {
/* 隐藏 */
display: none;
}
/* 选择所有.text-slider元素 */
.text-slider {
/* 宽度为100% */
width: 100%;
}
}
/* 当屏幕宽度小于等于530px时生效 */
@media (max-width:530px) {
/* 选择所有main元素 */
main {
/* 上下左右内边距为1rem */
padding: 1rem;
}
/* 选择所有.box元素 */
.box {
/* 边框半径为2rem */
border-radius: 2rem;
}
/* 选择所有.inner-box元素 */
.inner-box {
/* 上下左右内边距为1rem */
padding: 1rem;
}
/* 选择所有.carousel元素 */
.carousel {
/* 上下内边距为1.5rem，左右内边距为1rem */
padding: 1.5rem 1rem;
/* 边框半径为1.6rem */
border-radius: 1.6rem;
}
/* 选择所有.text-wrap元素 */
.text-wrap {
/* 下外边距为1rem */
margin-bottom: 1rem;
}
/* 选择所有.text-group元素下的h2元素 */
.text-group h2 {
/* 字体大小为1.2rem */
font-size: 1.2rem;
}
/* 选择所有form元素 */
form {
/* 上内边距为1rem，左右内边距为2rem，下内边距为1.5rem */
padding: 1rem 2rem 1.5rem;
}
}
四，js设置
- 获取页面中所有的输入框元素和切换按钮元素，并为输入框元素添加获取焦点和失去焦点的事件监听器，以实现输入框获取焦点时添加样式，失去焦点时移除样式的效果；为切换按钮元素添加点击事件监听器，以实现点击按钮时切换登录和注册模式的效果。
- 定义了一个名为moveSlider的函数，用于实现图片轮播和文本滑动的效果。该函数首先获取当前点击的小圆点的索引值，然后根据索引值获取对应的图片元素和文本滑动元素，将其他图片元素的show类名移除，将当前图片元素添加show类名，将文本滑动元素的transform属性设置为当前索引值对应的位置，将其他小圆点的active类名移除，将当前小圆点添加active类名。
- 为所有小圆点元素添加点击事件监听器，当小圆点被点击时，调用moveSlider函数实现图片轮播和文本滑动的效果。
// 获取页面中所有的输入框元素
const inputs = document.querySelectorAll('.input-field')
// 获取页面中所有的切换按钮元素
const toggle_btn = document.querySelectorAll('.toggle')
// 获取页面中的main元素
const main = document.querySelector('main')
// 获取页面中所有的小圆点元素
const bullets = document.querySelectorAll('.bullets span')
// 获取页面中所有的图片元素
const images = document.querySelectorAll('.image')
// 为所有输入框元素添加获取焦点和失去焦点的事件监听器
inputs.forEach(inp =>{
inp.addEventListener('focus',()=>{
inp.classList.add('active')
})
inp.addEventListener('blur',()=>{
if(inp.value !='')return
inp.classList.remove('active')
})
})
// 为所有切换按钮元素添加点击事件监听器
toggle_btn.forEach(btn =>{
btn.addEventListener('click',()=>{
main.classList.toggle('sign-up-mode')
})
})
// 定义moveSlider函数，用于实现图片轮播和文本滑动的效果
function moveSlider(){
// 获取当前点击的小圆点的索引值
let index = this.dataset.value;
// 根据索引值获取对应的图片元素
let currentImg = document.querySelector(`.img-${index}`)
// 将其他图片元素的show类名移除，将当前图片元素添加show类名
images.forEach(img =>{
img.classList.remove('show')
})
currentImg.classList.add('show')
// 获取文本滑动元素
const textSlider = document.querySelector('.text-group')
// 将文本滑动元素的transform属性设置为当前索引值对应的位置
textSlider.style.transform = `translateY(${-(index-1)*2.2}rem)`
// 将其他小圆点的active类名移除，将当前小圆点添加active类名
bullets.forEach(bullet =>{
bullet.classList.remove('active')
})
this.classList.add('active')
}
// 为所有小圆点元素添加点击事件监听器
bullets.forEach(bullet =>{
bullet.addEventListener('click',moveSlider)
})
五，代码
<!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>
<style>
/* 重置所有元素的内边距、外边距和盒模型为border-box */
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 设置页面背景颜色、字体颜色和背景图片 */
body {
color: #fff;
/* 设置字体颜色为白色 */
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0);
/* 设置背景图片 */
background-repeat: no-repeat;
/* 设置背景图片不重复 */
background-size: cover;
/* 设置背景图片覆盖整个页面 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* 设置字体 */
}
/* 设置主要区域的样式 */
main {
width: 100%;
/* 设置主要区域的宽度为100% */
overflow: hidden;
/* 隐藏主要区域的溢出内容 */
min-height: 100vh;
/* 设置主要区域的最小高度为视口高度 */
padding: 2rem;
/* 设置主要区域的内边距为2rem */
display: flex;
/* 将主要区域的子元素设置为flex布局 */
align-items: center;
/* 在主轴上居中对齐子元素 */
justify-content: center;
/* 在交叉轴上居中对齐子元素 */
}
/* 设置.box的样式 */
.box {
width: 100%;
/* 设置.box的宽度为100% */
max-width: 1020px;
/* 设置.box的最大宽度为1020px */
height: 640px;
/* 设置.box的高度为640px */
background-image: url(https://img.zcool.cn/community/01ff625e12cf12a80121651816523c.gif);
/* 设置.box的背景图片 */
background-repeat: no-repeat;
/* 设置.box的背景图片不重复 */
background-size: cover;
/* 设置.box的背景图片覆盖整个区域 */
position: relative;
/* 设置.box的定位为相对定位 */
border-radius: 3.3rem;
/* 设置.box的圆角半径为3.3rem */
box-shadow: 0 0 20px #b7b2a9;
/* 设置.box的阴影效果 */
}
/* 设置.inner-box的样式 */
.inner-box {
position: absolute;
/* 设置.inner-box的定位为绝对定位 */
width: calc(100% - 4.1rem);
/* 设置.inner-box的宽度为100%减去4.1rem */
height: calc(100% - 4.1rem);
/* 设置.inner-box的高度为100%减去4.1rem */
top: 50%;
/* 设置.inner-box的顶部距离为50% */
left: 50%;
/* 设置.inner-box的左侧距离为50% */
transform: translate(-50%, -50%);
/* 设置.inner-box的位置为居中 */
}
/* 设置.forms-wrap的样式 */
.forms-wrap {
position: absolute;
/* 设置.forms-wrap的定位为绝对定位 */
height: 100%;
/* 设置.forms-wrap的高度为100% */
width: 45%;
/* 设置.forms-wrap的宽度为45% */
left: 0;
/* 设置.forms-wrap的左侧距离为0 */
top: 0;
/* 设置.forms-wrap的顶部距离为0 */
display: grid;
/* 将.forms-wrap的子元素设置为grid布局 */
grid-template-columns: 1fr;
/* 设置.forms-wrap的列数为1 */
grid-template-rows: 1fr;
/* 设置.forms-wrap的行数为1 */
transition: 0.8s ease-in-out;
/* 设置.forms-wrap的过渡效果 */
}
/* 设置form的样式 */
form {
max-width: 260px;
/* 设置form的最大宽度为260px */
width: 100%;
/* 设置form的宽度为100% */
margin: 0 auto;
/* 设置form的水平居中 */
height: 100%;
/* 设置form的高度为100% */
display: flex;
/* 将form的子元素设置为flex布局 */
flex-direction: column;
/* 设置form的子元素在垂直方向上排列 */
justify-content: space-evenly;
/* 在form的子元素之间均匀分布空间 */
grid-column: 1/2;
/* 设置form的列为1到2 */
grid-row: 1/2;
/* 设置form的行为1到2 */
transition: opacity 0.02s 0.4s;
/* 设置form的过渡效果 */
}
/* 设置.sign-up-form的样式 */
form.sign-up-form {
opacity: 0;
/* 设置.sign-up-form的透明度为0 */
pointer-events: none;
/* 禁用.sign-up-form的鼠标事件 */
}
/* 设置.logo的样式 */
.logo {
display: flex;
/* 将.logo的子元素设置为flex布局 */
align-items: center;
/* 在.logo的子元素之间垂直居中 */
}
/* 设置.logo img的样式 */
.logo img {
height: 27px;
/* 设置.logo img的高度为27px */
margin-right: .3rem;
/* 设置.logo img的右侧外边距为0.3rem */
}
/* 设置.logo h4的样式 */
.logo h4 {
font-size: 1.1rem;
/* 设置.logo h4的字体大小为1.1rem */
letter-spacing: 0.5px;
/* 设置.logo h4的字母间距为0.5px */
color: floralwhite;
/* 设置.logo h4的字体颜色为#151111 */
}
/* 选择所有具有.heading类的元素下的h2元素 */
.heading h2 {
/* 设置字体大小为2.1rem */
font-size: 2.1rem;
/* 设置字体粗细为600 */
font-weight: 600;
/* 设置字体颜色为#151111 */
color: aqua;
}
/* 选择所有具有.heading类的元素下的h6元素 */
.heading h6 {
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 设置字体粗细为400 */
font-weight: 400;
/* 将元素显示为行内元素 */
display: inline;
/* 设置字体颜色为#bababa */
color: aqua;
}
/* 选择所有具有.toggle类的元素 */
.toggle {
/* 设置字体颜色为#bbb */
color: white;
/* 设置文本阴影 */
text-shadow: 0 0 20px #bababa;
/* 去除文本装饰 */
text-decoration: none;
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 设置字体粗细为500 */
font-weight: 500;
/* 设置过渡效果为0.3秒 */
transition: .3s;
}
/* 当鼠标悬停在.toggle元素上时 */
.toggle:hover {
/* 设置字体颜色为#8371f6 */
color: #8371f6;
}
/* 选择所有具有.input-wrap类的元素 */
.input-wrap {
/* 设置相对定位 */
position: relative;
/* 设置高度为37像素 */
height: 37px;
/* 设置下边距为2rem */
margin-bottom: 2rem;
}
/* 选择所有具有.input-field类的元素 */
.input-field {
/* 设置绝对定位 */
position: absolute;
/* 设置宽度为100% */
width: 100%;
/* 设置高度为100% */
height: 100%;
/* 设置背景为透明 */
background: none;
/* 去除边框 */
border: none;
/* 去除外边框 */
outline: none;
/* 设置底部边框为1像素的实线，颜色为#bbb */
border-bottom: 1px solid #bbb;
/* 去除内边距 */
padding: 0;
/* 设置字体大小为0.95rem */
font-size: 0.95rem;
/* 设置字体颜色为#151111 */
color: #151111;
/* 设置过渡效果为0.4秒 */
transition: 0.4s;
}
/* 选择所有label元素 */
label {
/* 设置绝对定位 */
position: absolute;
/* 设置左侧为0 */
left: 0;
/* 设置顶部为50% */
top: 50%;
/* 将元素向上移动50% */
transform: translateY(-50%);
/* 设置字体大小为0.95rem */
font-size: 0.95rem;
/* 设置字体颜色为#bbb */
color: #bbb;
/* 禁用指针事件 */
pointer-events: none;
/* 设置过渡效果为0.4秒 */
transition: 0.4s;
}
/* 当输入框处于活动状态时 */
.input-field:active {
/* 设置底部边框颜色为#151111 */
border-bottom-color: #151111;
}
/* 当输入框处于活动状态时，其后面的label元素 */
.input-field.active+label {
/* 设置字体大小为0.75rem */
font-size: 0.75rem;
/* 将元素向上移动2像素 */
top: -2px;
}
/* 选择所有具有.sign-btn类的元素 */
.sign-btn {
/* 设置为内联块元素 */
display: inline-block;
/* 设置宽度为100% */
width: 100%;
/* 设置高度为43像素 */
height: 43px;
/* 设置背景颜色为#151111 */
background: #b7b2a9;
/* 设置字体颜色为白色 */
color: #fff;
/* 去除边框 */
border: none;
/* 设置光标为手型 */
cursor: pointer;
/* 设置圆角为0.8rem */
border-radius: 0.8rem;
/* 设置下边距为2rem */
margin-bottom: 2rem;
/* 设置过渡效果为0.3秒 */
transition: 0.3s;
}
/* 当鼠标悬停在.sign-btn元素上时 */
.sign-btn:hover {
/* 设置背景颜色为#8371f6 */
background-color: #8371f6;
}
/* 选择所有具有.text类的元素 */
.text {
/* 设置为弹性盒子 */
display: flex;
/* 设置字体颜色为白色 */
color: white;
/* 设置文本阴影 */
text-shadow: 0 0 20px #b7b2a9;
/* 设置字体大小为0.7rem */
font-size: 0.7rem;
}
/* 选择所有.text元素内的a元素 */
.text a {
/* 设置字体颜色为#bbb */
color: #bbb;
/* 设置过渡效果为0.3秒 */
transition: 0.3s;
}
/* 当鼠标悬停在.text元素内的a元素上时 */
.text a:hover {
/* 设置字体颜色为#8371f6 */
color: #8371f6;
}
/* 当处于注册模式下的登录表单 */
main.sign-up-mode form.sign-in-form {
/* 设置透明度为0 */
opacity: 0;
/* 禁用指针事件 */
pointer-events: none
}
/* 当处于注册模式下的注册表单 */
main.sign-up-mode form.sign-up-form {
/* 设置透明度为1 */
opacity: 1;
/* 启用指针事件 */
pointer-events: all
}
/* 当处于注册模式下的表单容器 */
main.sign-up-mode .forms-wrap {
/* 设置左侧位置为55% */
left: 55%;
}
/* 当处于注册模式下的轮播容器 */
main.sign-up-mode .carousel {
/* 设置左侧位置为0% */
left: 0%;
}
/* 选择所有.carousel元素 */
.carousel {
/* 设置圆角为2rem */
border-radius: 2rem;
/* 设置内边距为2rem */
padding: 2rem;
/* 设置为绝对定位 */
position: absolute;
/* 设置溢出隐藏 */
overflow: hidden;
/* 设置高度为100% */
height: 100%;
/* 设置宽度为55% */
width: 55%;
/* 设置左侧位置为45% */
left: 45%;
/* 设置顶部位置为0 */
top: 0;
/* 设置阴影效果 */
box-shadow: 0 0 5px #b7b2a9;
/* 设置背景颜色为透明 */
background-color: transparent;
/* 设置为网格布局 */
display: grid;
/* 设置过渡效果为0.8秒 */
transition: 0.8s ease-in-out;
/* 设置为相对定位 */
position: relative;
/* 设置网格行模板 */
grid-template-rows: auto 1fr;
}
/* 选择所有.images-wrapper元素 */
.images-wrapper {
/* 设置为网格布局 */
display: grid;
/* 设置网格列模板 */
grid-template-columns: 2fr;
/* 设置网格行模板 */
grid-template-rows: 1fr;
}
/* 选择所有.image元素 */
.image {
/* 设置宽度为100% */
width: 100%;
/* 设置网格列为1到2 */
grid-column: 1/2;
/* 设置网格行为1到2 */
grid-row: 1/2;
/* 设置透明度为0 */
opacity: 0;
/* 设置过渡效果 */
transition: opacity 0.3s, transform 0.5s;
}
/* 选择所有.img-1元素 */
.img-1 {
/* 设置向上平移50像素 */
transform: translate(0, -50px);
}
/* 选择所有.img-2元素 */
.img-2 {
/* 设置水平和垂直缩放 */
transform: scale(0.4, 0.5);
}
/* 选择所有.img-3元素 */
.img-3 {
/* 设置缩放和旋转 */
transform: scale(0.3), rotate((-20deg));
}
/* 选择所有具有.show类的.image元素 */
.image.show {
/* 设置透明度为1 */
opacity: 1;
/* 取消所有变换效果 */
transform: none;
}
/* 选择所有.text-slider元素 */
.text-slider {
/* 设置为flex布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
/* 设置主轴方向为垂直 */
flex-direction: column;
}
/* 选择所有.text-wrap元素 */
.text-wrap {
/* 设置最大高度为2.2rem */
max-height: 2.2rem;
/* 超出部分隐藏 */
overflow: hidden;
/* 底部外边距为2.5rem */
margin-bottom: 2.5rem;
}
/* 选择所有.text-group元素 */
.text-group {
/* 设置为flex布局 */
display: flex;
/* 设置主轴方向为垂直 */
flex-direction: column;
/* 文本居中 */
text-align: center;
/* 初始位置为不偏移 */
transform: translateY(0);
/* 过渡效果为0.5秒 */
transition: 0.5s;
}
/* 选择所有.text-group元素下的h2元素 */
.text-group h2 {
/* 设置行高为2.2rem */
line-height: 2.2rem;
/* 设置字体粗细为600 */
font-weight: 600;
/* 设置字体大小为1.6rem */
font-size: 1.6rem;
}
/* 选择所有.bullets元素 */
.bullets {
/* 顶部外边距为20px */
margin-top: 20px;
/* 设置为flex布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
/* 选择所有.bullets元素下的span元素 */
.bullets span {
/* 设置为块级元素 */
display: block;
/* 宽度为0.5rem */
width: 0.5rem;
/* 高度为0.5rem */
height: 0.5rem;
/* 圆角为0.2rem */
border-radius: 0.2rem;
/* 背景颜色为白色 */
background-color: white;
/* 设置阴影 */
box-shadow: 20px #b7b2a9;
/* 左右外边距为0.25rem */
margin: 0 0.25rem;
/* 鼠标指针为手型 */
cursor: pointer;
/* 过渡效果为0.3秒 */
transition: .3s;
}
/* 选择所有.bullets元素下的.active元素 */
.bullets span.active {
/* 宽度为1.1rem */
width: 1.1rem;
/* 背景颜色为aqua */
background-color: aqua;
/* 圆角为1rem */
border-radius: 1rem;
}
/* 当屏幕宽度小于等于850px时生效 */
@media (max-width:850px) {
/* 选择所有.box元素 */
.box {
/* 高度自适应 */
height: auto;
/* 最大宽度为550px */
max-width: 550px;
/* 溢出隐藏 */
overflow: hidden;
}
/* 选择所有.inner-box元素 */
.inner-box {
/* 位置为默认值 */
position: static;
/* 变换为默认值 */
transform: none;
/* 宽度为默认值 */
width: revert;
/* 高度为默认值 */
height: revert;
/* 上下左右内边距为2rem */
padding: 2rem;
}
/* 选择所有.forms-wrap元素 */
.forms-wrap {
/* 位置为默认值 */
position: revert;
/* 宽度为100% */
width: 100%;
/* 高度为100% */
height: 100%;
}
/* 选择所有.form元素 */
.form {
/* 最大宽度为默认值 */
max-width: revert;
/* 上内边距为1.5rem，左右内边距为2.5rem，下内边距为2rem */
padding: 1.5rem 2.5rem 2rem;
/* 过渡效果为0.8秒，缓动函数为ease-in-out，透明度过渡效果为线性 */
transition: transform 0.8s ease-in-out, opacity 0.4s linear;
}
/* 选择所有.heading元素 */
.heading {
/* 上下外边距为2rem，左右外边距为0 */
margin: 2rem 0;
}
/* 选择所有.sign-up-form元素 */
form.sign-up-form {
/* 向右偏移100% */
transform: translateX(100%);
}
/* 选择所有.sign-up-mode元素下的.sign-in-form元素 */
main.sign-up-mode form.sign-in-form {
/* 向左偏移100% */
transform: translateX(-100%);
}
/* 选择所有.sign-up-mode元素下的.sign-up-form元素 */
main.sign-up-mode form.sign-up-form {
/* 不偏移 */
transform: translateX(0%);
}
/* 选择所有.carousel元素 */
.carousel {
/* 位置为默认值 */
position: revert;
/* 高度自适应 */
height: auto;
/* 宽度为100% */
width: 100%;
/* 上下内边距为3rem，左右内边距为2rem */
padding: 3rem 2rem;
/* 设置为flex布局 */
display: flex;
}
/* 选择所有.images-wrapper元素 */
.images-wrapper {
/* 隐藏 */
display: none;
}
/* 选择所有.text-slider元素 */
.text-slider {
/* 宽度为100% */
width: 100%;
}
}
/* 当屏幕宽度小于等于530px时生效 */
@media (max-width:530px) {
/* 选择所有main元素 */
main {
/* 上下左右内边距为1rem */
padding: 1rem;
}
/* 选择所有.box元素 */
.box {
/* 边框半径为2rem */
border-radius: 2rem;
}
/* 选择所有.inner-box元素 */
.inner-box {
/* 上下左右内边距为1rem */
padding: 1rem;
}
/* 选择所有.carousel元素 */
.carousel {
/* 上下内边距为1.5rem，左右内边距为1rem */
padding: 1.5rem 1rem;
/* 边框半径为1.6rem */
border-radius: 1.6rem;
}
/* 选择所有.text-wrap元素 */
.text-wrap {
/* 下外边距为1rem */
margin-bottom: 1rem;
}
/* 选择所有.text-group元素下的h2元素 */
.text-group h2 {
/* 字体大小为1.2rem */
font-size: 1.2rem;
}
/* 选择所有form元素 */
form {
/* 上内边距为1rem，左右内边距为2rem，下内边距为1.5rem */
padding: 1rem 2rem 1.5rem;
}
}
</style>
</head>
<body>
<!-- 这是一个包含登录和注册表单的主要区域 -->
<main>
<!-- 包含登录和注册表单的容器 -->
<div class="box">
<!-- 包含登录和注册表单的内部容器 -->
<div class="inner-box">
<!-- 包含登录和注册表单的表单容器 -->
<div class="forms-wrap">
<!-- 登录表单 -->
<form action="index.html" autocomplete="off" class="sign-in-form">
<!-- 包含网站logo的容器 -->
<div class="logo">
<h4>前端学习</h4>
</div>
<!-- 包含标题和切换注册表单的链接的容器 -->
<div class="heading">
<h2>欢迎回来</h2>
<h6>Not registered yet?</h6>
<a href="#" class="toggle">Sign up</a>
</div>
<!-- 包含输入字段和提交按钮的容器 -->
<div class="actual-form">
<!-- 包含用户名输入字段的容器 -->
<div class="input-wrap">
<input id="name" type="text" minlength="4" autocomplete="off" required
class="input-field">
<label for="name">Name</label>
</div>
<!-- 包含密码输入字段的容器 -->
<div class="input-wrap">
<input id="password" type="password" autocomplete="off" required class="input-field">
<label for="password">Password</label>
</div>
<!-- 登录表单的提交按钮 -->
<input type="submit" value="SIGN IN" class="sign-btn">
<!-- 忘记密码的链接 -->
<p class="text">忘记密码?
<a href="#">获取帮助</a>
</p>
</div>
</form>
<!-- 注册表单 -->
<form action="index.html" autocomplete="off" class="sign-up-form">
<!-- 包含网站logo的容器 -->
<div class="logo">
<!-- <img src="" alt=""> -->
<h4>前端学习</h4>
</div>
<!-- 包含标题和切换登录表单的链接的容器 -->
<div class="heading">
<h2>注册</h2>
<h6>Already have an account?</h6>
<a href="#" class="toggle">Sign In</a>
</div>
<!-- 包含输入字段和提交按钮的容器 -->
<div class="actual-form">
<!-- 包含用户名输入字段的容器 -->
<div class="input-wrap">
<input id="sign-name" type="text" minlength="4" autocomplete="off" required
class="input-field">
<label for="sign-name">Name</label>
</div>
<!-- 包含电子邮件输入字段的容器 -->
<div class="input-wrap">
<input id="sign-email" type="email" autocomplete="off" required class="input-field">
<label for="sign-email">Email</label>
</div>
<!-- 包含密码输入字段的容器 -->
<div class="input-wrap">
<input id="sign-password" type="password" autocomplete="off" required
class="input-field">
<label for="sign-password">Password</label>
</div>
<!-- 注册表单的提交按钮 -->
<input type="submit" value="SIGN UP" class="sign-btn">
<!-- 同意服务条款和隐私协议的复选框 -->
<p class="text"> <input type="checkbox" name="" id="">注册前我已阅读并同意
<a href="#">服务条款</a>和<a href="#">隐私协议</a>
</p>
</div>
</form>
</div>
<!-- 包含轮播图的容器 -->
<div class="carousel">
<!-- 包含轮播图图片的容器 -->
<div class="images-wrapper">
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/68ff62863bb9fd90d6fd874802e08568.mp4.jpg"
class="image img-1 show" alt="">
<img src="https://wallpaper-static.cheetahfun.com/wallpaper/sites/scifi/pic5.jpg" alt=""
class="image img-2">
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8bc682fba0a8747155409b3bbc2676ac.mp4.jpg"
alt="" class="image img-3">
</div>
<!-- 包含轮播图文本和轮播图指示器的容器 -->
<div class="text-slider">
<!-- 包含轮播图文本的容器 -->
<div class="text-wrap">
<div class="text-group">
<h2>开始你的学习旅程</h2>
<h2>准备创造奇迹吧</h2>
<h2>学习是一切创建力的开始</h2>
</div>
</div>
<!-- 包含轮播图指示器的容器 -->
<div class="bullets">
<span class="active" data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<script>
// 获取页面中所有的输入框元素
const inputs = document.querySelectorAll('.input-field')
// 获取页面中所有的切换按钮元素
const toggle_btn = document.querySelectorAll('.toggle')
// 获取页面中的main元素
const main = document.querySelector('main')
// 获取页面中所有的小圆点元素
const bullets = document.querySelectorAll('.bullets span')
// 获取页面中所有的图片元素
const images = document.querySelectorAll('.image')
// 为所有输入框元素添加获取焦点和失去焦点的事件监听器
inputs.forEach(inp => {
inp.addEventListener('focus', () => {
inp.classList.add('active')
})
inp.addEventListener('blur', () => {
if (inp.value != '') return
inp.classList.remove('active')
})
})
// 为所有切换按钮元素添加点击事件监听器
toggle_btn.forEach(btn => {
btn.addEventListener('click', () => {
main.classList.toggle('sign-up-mode')
})
})
// 定义moveSlider函数，用于实现图片轮播和文本滑动的效果
function moveSlider() {
// 获取当前点击的小圆点的索引值
let index = this.dataset.value;
// 根据索引值获取对应的图片元素
let currentImg = document.querySelector(`.img-${index}`)
// 将其他图片元素的show类名移除，将当前图片元素添加show类名
images.forEach(img => {
img.classList.remove('show')
})
currentImg.classList.add('show')
// 获取文本滑动元素
const textSlider = document.querySelector('.text-group')
// 将文本滑动元素的transform属性设置为当前索引值对应的位置
textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`
// 将其他小圆点的active类名移除，将当前小圆点添加active类名
bullets.forEach(bullet => {
bullet.classList.remove('active')
})
this.classList.add('active')
}
// 为所有小圆点元素添加点击事件监听器
bullets.forEach(bullet => {
bullet.addEventListener('click', moveSlider)
})
</script>
</html>
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
