javascript - 如何消除导航栏上图像幻灯片的重叠？
问题描述
我创建了这个网站，一切似乎都正常，但唯一的问题是我的图像滑块重叠在我的导航栏上。我已经尝试了几乎所有的方法来修复它......但它似乎不起作用......我已经把 z-index: 1000; 对于我的导航栏和 z-index：1；对于我的滑块。它是一样的。
如果你能解决这个问题，将不胜感激！
谢谢你，加布里埃尔！
const carouselSlide = document.querySelector('.slides');
const carouselImages = document.querySelectorAll('.slides img');
// Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
// Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
// Button Listeners
nextBtn.addEventListener('click', () => {
if (counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
carouselSlide.addEventListener("transitionend", () => {
if (carouselImages[counter].id === 'lastClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
if (carouselImages[counter].id === 'firstClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
});
const toggleButton = document.getElementsByClassName("toggle-button")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
function HideScrollbar() {
var style = document.createElement("style");
style.innerHTML = `body::-webkit-scrollbar {display: none;}`;
document.head.appendChild(style);
}/* */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
transition: 5s ease;
}
body {
font-family: sans-serif;
margin: 0;
padding: 30px 0 0;
}
/* This is to remove the scroll
bar but it is functional */
::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
header {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 1);
position: sticky;
top: 0px;
background: #a9a9a9;
}
.navbar {
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: black;
text-decoration: none;
}
/* Sections */
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section {
font-size: 5rem;
color: whitesmoke;
}
.section1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../Basic/components/home.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.section2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../Basic/components/temple.jpg);
height: 100vh;
background-size: cover;
background-position: center;
animation: text 2s 1;
}
.section3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../Basic/components/contact.jpg);
height: 100vh;
background-size: cover;
background-position: cover;
}
.button {
position: absolute;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
animation: none;
}
.btn {
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
}
.btn:hover {
background-color: whitesmoke;
color: black;
transition: 1s ease;
}
.bubble {
position: absolute;
z-index: -2;
transform: scale(2);
transition: all 0.5s ease;
}
/* ---------- Navbar ---------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
z-index: 1000;
display: flex;
align-items: center;
background-color: #a9a9a9;
color: black;
list-style: none;
overflow: hidden;
}
.brand-title {
font-size: 1.5rem;
margin: 1rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: black;
padding: 1rem;
}
.navbar-links li:hover {
background-color: grey;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
@media (max-width: 800px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: 0.5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
/* Cursor */
.cursor {
transition-timing-function: ease-out;
background-color: red;
border-radius: 5px;
height: 10px;
transition-duration: 500ms;
transform: translateX(-50%) translateY(-50%);
position: fixed;
width: 10px;
}
@keyframes text {
0% {
color: black;
margin-bottom: -40px;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 8px;
margin-bottom: -40px;
}
}
@media screen and (max-width: 500px) {
.button {
display: none;
}
@keyframes text {
display {
display: none;
}
}
}
/* --------- Image Slider --------- */
.slider {
z-index: 1;
width: 71.5%;
margin: auto;
overflow: hidden;
display: flex;
}
.slides {
display: flex;
width: 100%;
height: 500px;
}
#prevBtn {
position: absolute;
top: 160%;
z-index: 10;
left: 5%;
font-size: 30px;
color: white;
opacity: 0.8;
cursor: pointer;
}
#nextBtn {
position: absolute;
top: 160%;
z-index: 10;
right: 5%;
font-size: 30px;
color: white;
opacity: 0.8;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- title -->
<title>Gab's Web</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"/>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Main Header -->
<header>
<!-- Navbar -->
<nav class="navbar">
<div class="brand-title">Gab's Web</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#templates">Template</a></li>
<li><a href="#contact">Contact</a></li>
<div class="bubble"></div>
</ul>
</div>
</nav>
</header>
<!-- Pages -->
<main>
<section id="home" class="section1">Home
<div class="button">
<a id="btn1" href="https://www.youtube.com/channel/UC1SalOP2ZiO9fK-yxPtYF3A" class="btn">Channel</a>
<a id="btn2" href="#" class="btn">Sponsor</a>
</div>
</section>
<section id="templates" class="section2">
<!-- Image Slider Start -->
<div class="slider">
<i class="fas fa-arrow-left" id="prevBtn"></i>
<i class="fas fa-arrow-right" id="nextBtn"></i>
<div class="slides">
<img src="../Basic/components/img-5.jpg" id="lastClone" alt="">
<img src="../Basic/components/img-1.jpg" alt="">
<img src="../Basic/components/img-2.jpg" alt="">
<img src="../Basic/components/img-3.jpg" alt="">
<img src="../Basic/components/img-4.jpg" alt="">
<img src="../Basic/components/img-5.jpg" alt="">
<img src="../Basic/components/img-1.jpg" id="firstClone" alt="">
</div>
<!-- Image Slider End -->
</div>
</section>
<section id="contact" class="section3">Contact</section>
<!-- Buttons -->
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../Temple1/app.js"></script>
</body>
</html>解决方案
在元素上添加一个z-index:1（或任何你需要的）应该可以解决这个问题。<header>
推荐阅读
- python - 合并和附加字典
- python - 使用 Python Paramiko 在远程服务器上执行的脚本无法读取/访问本地文件
- python - 带有自定义图例的 Seaborn 热图
- flutter - ChangeNotifierProxyProvider 未在构建时启动
- javascript - 如何禁用 FROALA 编辑器 PDF 查看器？
- c++ - 为什么移动和值构造函数的这种组合对于 MSVC 不明确，但对于 C++17 及更高版本中的 Clang 和 GCC 不明确
- java - 为什么使用Python脚本调用jar文件后立即终止？
- angular - 分页控件在离子中不起作用
- c++ - 将派生类型的值作为模板 NTTP 参数传递
- python - 动态乘以多列熊猫