Implement a good-looking universal and responsive layout, adaptive login/registration page
page design
The page is designed with a sliding effect. One side of the box is for login and the other is for registration. Then there is a blocking box in the middle. By sliding left and right, the blocking box can display the login page or the registration page. Then a blur event is added to the form input of login and registration. The label and input seem to have an illusion of inside and outside, which is very attractive. Then added to the entire page @mediato achieve a responsive layout. And the carousel image and its text also adopt the effect of animation. The carousel map button data-valuemakes the button below correspond to the carousel map through js binding properties.
Effect picture When we click the sign in or sign up above, the shielding box slides left and right to display the login page or the registration page
因为是自适应布局我们在码上掘金看不到大屏效果，我们可以打开码上掘金看整体效果
overall page layout
Here is an explanation of the overall page layout:
-
The code contains a
<main>tag that represents the main content of the page. -
The form section contains two
<form>tabs, the login form and the registration form. -
Each form contains a
<div>label that contains the various elements of the form. -
Each form contains a
<div>label that contains the title of the form and a toggle button. -
Every form contains a
<div>label that contains the actual input fields of the form. -
Each form contains a
<input>label for submitting the form. -
Each form includes a
<p>tab to include other relevant information, such as a forgot password link and terms of service. -
The carousel section contains a
<div>label that contains all the elements of the carousel. -
The carousel section contains a
<div>label to contain the image and text of the carousel. -
The carousel section contains a
<div>label for the dots that contain the carousel. -
The carousel section contains three
<img>tabs that display images for the carousel. -
The carousel section contains a
<h2>label that displays the text of the carousel.
In summary, this code is an example of a simple login and registration form and carousel that can be used for login and registration pages in web development.
<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>
复制代码style setting
In the entire page style layout, we mainly use flex elastic layout and grid layout. Then realize our location through positioning. In this page, we use translateanimation to move, and use left right for layout distribution.
/* 重置所有元素的内边距、外边距和盒模型为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 settings
- Get all the input box elements and switch button elements in the page, and add focus and lose focus event listeners to the input box elements to achieve the effect of adding styles when the input box gets focus and removing styles when it loses focus; for switching Add a click event listener to the button element to achieve the effect of switching between login and registration modes when the button is clicked.
- A function called moveSlider is defined to realize the effect of image carousel and text sliding. This function first obtains the index value of the currently clicked dot, then obtains the corresponding image element and text sliding element according to the index value, removes the show class name of other image elements, adds the show class name to the current image element, and adds the text Set the transform attribute of the sliding element to the position corresponding to the current index value, remove the active class name of other dots, and add the active class name to the current dot.
- Add click event listeners to all small dot elements, and when the dot is clicked, call the moveSlider function to achieve the effect of image carousel and text sliding.
// 获取页面中所有的输入框元素
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)
})
复制代码Source code-login registration
[Nuggets/Login Registration Mr-WYP/Html-css-js-demo - Code Cloud - Open Source China (gitee.com)](Nuggets Mr-WYP/Html-css-js-demo - Code Cloud - Open Source China (gitee.com )