标签：轮播仿写门户网站 button 首页设置按钮 swiper center

首页

前端代码：

导航栏：

</div>

<li><a href="#">爆爆珠系列</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</header>

解析：

<header>：表示网站的顶部区域。
<nav class="navbar">：表示导航栏的容器。
<div class="navbar-logo">：表示导航栏的标志图片部分。
<img src="img/ABUIABAEGAAgsd3Z6QUopvnbvwYwkAM4kAM.png" alt="真至味logo">：表示导航栏的标志图片，其中 src 属性指定图片的路径，alt 属性提供图片的替代文本。
<ul class="navbar-menu">：表示导航菜单的容器。
<li><a href="#" class="active">首页</a></li>：表示导航菜单中的一个菜单项，其中 <a> 标签定义了链接，href="#" 表示链接目标为空，class="active" 表示当前活动的菜单项。
<li class="dropdown">：表示一个具有下拉菜单的菜单项。
<ul class="dropdown-menu">：表示下拉菜单的容器。
<li><a href="#">爆爆珠系列</a></li>：表示下拉菜单中的一个子菜单项。
<li><a href="#">关于我们</a></li>：表示一个普通的菜单项。
<li class="dropdown">：表示另一个具有下拉菜单的菜单项。
<li><a href="#">联系我们</a></li>：表示一个普通的菜单项。

轮播图：

</div>

</div>

</div>

</div>

<div class="swiper mySwiper" style="width: 1392px;height: 600px">：表示图片轮播器的容器。使用了 swiper 和 mySwiper 两个类名来设置样式和初始化 Swiper 插件。style 属性用于设置容器的宽度和高度。
<div class="swiper-wrapper">：表示图片轮播的内容的容器。
<div class="swiper-slide">：表示一个轮播项。可以在其中添加图片或其他内容。
<img src="img/ABUIABACGAAgtuL-6QUo38fvlgIwgA842AQ.jpg" alt="">：表示一个图片轮播项中的图片，其中 src 属性指定图片的路径，alt 属性提供图片的替代文本。
<div class="swiper-button-next"></div>：表示下一个轮播项的按钮。
<div class="swiper-button-prev"></div>：表示上一个轮播项的按钮。

.swiper {

width: 100%;

height: 100%;

}

.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

transition: transform 0.5s;

transform-style: preserve-3d;

}

.swiper-slide img {

display: block;

width: 100%;

height: 100%;

object-fit: cover;

}

.swiper-button {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 40px;

height: 40px;

background: #000;

color: #fff;

font-size: 20px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

z-index: 999;

}

.swiper-button-prev {

left: 10px;

}

.swiper-button-next {

right: 10px;

}

.swiper 类用于设置图片轮播器容器的宽度和高度，这里设置为占满父元素的全部空间。

.swiper-slide 类用于设置每个轮播项的样式。这里设置了文本居中对齐、背景为白色，并使用 Flexbox 布局将内容居中显示。transition 属性用于设置轮播项的过渡效果，在这里是在 0.5 秒内应用 transform 属性的过渡效果。transform-style: preserve-3d; 用于保持 3D 变换的层级关系。

.swiper-slide img 用于设置轮播项中的图片样式。display: block; 表示图片以块级元素显示，width: 100%; height: 100%; 设置图片的宽度和高度为轮播项的整个区域，object-fit: cover; 使图片在保持比例的同时填充整个轮播项。

.swiper-button 类用于设置轮播器的前进和后退按钮的样式。position: absolute; 将按钮定位为绝对定位，top: 50%; transform: translateY(-50%); 使按钮在垂直方向上居中对齐。width: 40px; height: 40px; 设置按钮的宽度和高度。background: #000; color: #fff; 设置按钮的背景颜色和文字颜色。font-size: 20px; 设置按钮文字的大小。display: flex; justify-content: center; align-items: center; 使按钮内容在按钮中居中对齐。cursor: pointer; 设置按钮鼠标悬停时的指针样式为手型。z-index: 999; 设置按钮的层级关系，使其位于其他内容之上。

.swiper-button-prev 和 .swiper-button-next 分别用于设置前进和后退按钮的位置。left: 10px; 将前进按钮定位到距离左侧 10 像素的位置，right: 10px; 将后退按钮定位到距离右侧 10 像素的位置。

轮播图js代码部分：

var mySwiper = new Swiper('.mySwiper', {

direction: 'vertical',

loop: true,

autoplay: {

delay: 3000,

disableOnInteraction: false,

effect: 'creative',

creativeEffect: {

prev: {

shadow: true,

translate: ['0%', '-100%', '-500px'],

rotate: [0, 0, -90],

stretch: 0,

depth: 200,

modifier: 1,

next: {

shadow: true,

translate: ['0%', '100%', '-500px'],

rotate: [0, 0, 90],

stretch: 0,

depth: 200,

modifier: 1,

grabCursor: true,

});

// 获取前进和后退按钮元素

var prevButton = document.querySelector('.swiper-button-prev');

var nextButton = document.querySelector('.swiper-button-next');

// 为按钮绑定事件处理函数

prevButton.addEventListener('click', function() {

mySwiper.slidePrev();

});

nextButton.addEventListener('click', function() {

mySwiper.slideNext();

});

通过 new Swiper('.mySwiper', { ... }) 创建了一个 Swiper 实例，并将其绑定到具有 .mySwiper 类名的元素上。在配置对象中，可以设置各种选项来定义轮播器的行为和效果。这里设置了垂直方向的轮播、循环播放、自动播放并间隔 3000 毫秒、切换效果为 "creative" 等。

通过 document.querySelector('.swiper-button-prev') 和 document.querySelector('.swiper-button-next') 获取前进和后退按钮的元素

为前进按钮和后退按钮绑定 click 事件处理函数。当按钮被点击时，分别调用 mySwiper.slidePrev() 和 mySwiper.slideNext() 来切换到前一个和后一个轮播项。

标签：轮播,仿写,门户网站,button,首页,设置,按钮,swiper,center
From： https://www.cnblogs.com/959886jjc/p/17531232.html

仿写门户网站首页

首页

前端代码：

轮播图js代码部分：

相关文章

赞助商

阅读排行