今日实现目标：轮播图以及轮播图上注册登录框。 具体效果如下图所示：
以下是本篇文章正文内容，下面案例可供参考
轮播图部分所在div主要分为两个部分：轮播图以及轮播图上登录注册框。 代码如下（示例）：
<div class="lunbotu"> <!--注册登录框--> <div class="download"></div> <!--轮播图（方式在下方详细介绍）--> <div class="swiper-container"></div> </div>代码如下（示例）：
/*总体布局*/ .lunbotu{ width: 100%; height: 398px; position: relative; } /*注册登录框整体布局*/ .lunbotu .download{ width: 208px; height: 206px; position: absolute;/*定位布局*/ right: 200px; top: 56px; border-radius: 5px; box-shadow: 0px 4px 17px 0 rgba(159, 159, 159, .53);/*阴影*/ background-image: url('../image/denglubeijing.png');/*背景图*/ background-size: cover; z-index: 10; }注册登录框主要分为头像、文字以及两个按钮。 代码如下（示例）：
<div class="download"> <div class="touxiang"></div> <h3>Hi,您好</h3> <a href="#" class="denglu">登录</a> <a href="#" class="zhuce">注册</a> </div>代码如下（示例）：
/*上方头像*/ .lunbotu .download .touxiang{ background-image: url('../image/morentouxiang.png'); background-size: cover; width: 59px; height: 59px; position: absolute;/*定位*/ top: -28px; left: 74px; border-radius: 59px; } /*Hi，您好文字*/ .lunbotu .download>h3{ text-align: center; font-size: 14px; color: #262626; letter-spacing: 0; font-weight: 100; margin-top: 70px; } /*注册登录按钮相同布局*/ .lunbotu .download .denglu,.lunbotu .download .zhuce{ display: block;/*将a标签变为块级元素，才可以设置宽高*/ text-decoration: none;/*无下划线*/ width: 126px; height: 32.5px; margin: 0 auto;/*水平居中*/ margin-top: 15px; line-height: 32.5px;/*行高，使文字垂直居中*/ font-size: 14px; border-radius: 17px; text-align: center; } /*登录注册按钮不同样式*/ .lunbotu .download .denglu{ color: white; background-color: #005bac; box-shadow: 0 2px 5px 0 #84c0f5; } .lunbotu .download .zhuce{ color: #005bac; border: 1px solid #005bac; }本项目轮播图采用swiper官网引入轮播图形式swiper中文网，具体步骤如下所示：
进入官网，找到swiper基础演示，查找到自己喜欢的轮播图样式，本项目使用的是280号点击页面左上角下载地址，下载所需文件找到自己下载好的文件，解压，将下载好的swiper-bundle.min.css，swiper-bundle.min.js文件（文件所在位置：swiper-6.1.2\package文件中）放在项目的css文件夹以及js文件夹中，然后进行链接，代码如下 <link rel="stylesheet" href="../css/swiper-bundle.min.css"><!--head中--> <script src="../js/swiper-bundle.min.js"></script><!--轮播图所在div后--> 找到demos选项，对自己选中的样式右键——打开方式——文本文档，复制所需html代码以及js代码，插入轮播图所需图片 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="../image/53053_1920x398.png" width="100%" height="389px"></div> <div class="swiper-slide"><img src="../image/53039_1920x398.png" width="100%" height="389px"></div> <div class="swiper-slide"><img src="../image/53037_1920x398.jpg" width="100%" height="389px"></div> <div class="swiper-slide"><img src="../image/53031_1920x398.png" width="100%" height="389px"></div> <div class="swiper-slide"><img src="../image/53007_1920x398.jpg" width="100%" height="389px"></div> </div> <!-- 小圆点 --> <div class="swiper-pagination"></div> <!-- 左右箭头 --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script src="../js/swiper-bundle.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, loop:true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> 轮播图完成，查看效果，根据本人需求进行图片修改