个人中心
gpt4 book ai didi

javascript - 响应 slider 定位

转载 作者：太空宇宙 更新时间：2023-11-04 00:54:37 26 4
gpt4 key购买 nike

我正在构建一个响应式网站，但我正在努力处理幻灯片中的点，如下图所示，当我切换到设备工具栏时，它们改变了它们的位置我已经尝试了我想到的一切从相对单位到绝对单位，但没有任何效果，我需要帮助，我在谷歌等搜索，但我没有找到任何有用的东西。

enter image description here

当我切换到设备工具栏时:

enter image description here

当您注意到点的位置发生变化时，我不希望出现这种行为。

这是我的代码:

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>EatManger</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="query.css">

</head>

<body style="background-color:purple">


  <div class="container">

    <div class="logo-box">
      <img src="images/logo.png" class="logo" alt="logo">
    </div>
    <i class="fas fa-bars hamburger-btn"></i>
    <ul class="main-nav">
      <li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
      <li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
    </ul>

  </div>

  <div class="slideshow-container">
    <div class="mySlides fade-zz">
      <img src="images/food3.png" class="imgSlide">
    </div>
    <div class="mySlides fade-zz">
      <img src="images/pizza.png" class="imgSlide" >
    </div>

    <div class="mySlides fade-zz">
      <img src="images/hamburger2.png" class="imgSlide">
    </div>

    <div class="dotz">
      <span class="dot" onclick="currentSlide(1-1)"></span>
      <span class="dot" onclick="currentSlide(2-1)"></span>
      <span class="dot" onclick="currentSlide(3-1)"></span>
    </div>


  </div>





  <div class="contact-box">
    <div class="adress">
      <i class="fas fa-map-marker-alt conbox"></i>
      <h3 class="contact-title">Address</h3>
      <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
    </div>
    <div class="phone">
      <i class="fas fa-phone-volume conbox"></i>
      <h3 class="contact-title">Phone</h3>
      <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
    </div>
    <div class="opening-time">
      <i class="far fa-clock conbox"></i>
      <h3 class="contact-title">Opening time</h3>
      <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
    </div>
</div>

<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
    imprimeur
    anonyme assembla </p>
</section>

















  <script src="script.js" charset="utf-8"></script>
</body>

</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 4rem;
  background-color: red;
  transition: height .1s;
}

.container-add{
  height: 20rem;
}

.hamburger-btn {
  position: absolute;
  margin-top: 5px;
  right: 4px;
  font-size: 40px;
  color: white;
}

.logo-box {
  display: inline-block;
}

.logo {
  width: 100px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15.62rem;
  align-items: center;
visibility: hidden;
}

.main-nav-hide{
  visibility:visible;
}

.main-nav-item {
  list-style: none;
  color: white;
  font-family: Roboto;
  text-transform: uppercase;
  font-weight: 700;
  /* display: none; */
}



.main-nav-link {
  text-decoration: none;
  color: inherit;
  padding-left: 20px;
}


.slideshow-container{
  margin: auto;
  max-width: 980px;
  width: 100vw;
}

.imgSlide{
  width: 100%;
}

.imgSlide-show{
  display: block;
}

.dotz{
  text-align: center;
  position: absolute;
  top: 35%;
  left: 50vw
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ddd
}

.active{
background-color: #ff9900;

}

.active:hover,.dot:hover{
  cursor: pointer;
}

.fade-zz{
  animation-name: fade;
  animation-duration: 1.4s;
  transition:.4s
}

@keyframes fade {
  from{
    opacity: .4;
  }
  to{
    opacity: 1
  }
}

.contact-box{
  background-color: red;
  position: relative;
  top: -1.39rem;
  height: 380px;
}

.conbox{
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  /* margin-top: .8rem; */
}


.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}


.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}


.opening-time{
  color: white;
  text-align: center;
  font-family: roboto;
  margin-top: 2rem;
}


.about-us{
  color: white;
}

.title{
  text-align: center;
  font-family: roboto;
}

.abicon{
  text-align: center;
  display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}

.title-description{
  display: block;
  margin: auto;
}

JavaScript

//HAMBURGER BUTTON

var hamBtn=document.querySelector(".hamburger-btn");

hamBtn.addEventListener("click",function(){
  document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");



});


//SLIDESHOW

slideIndex=0;

function currentSlide(n){
  slideIndex=n;
  showSlide(slideIndex);
}

function showSlide(n){
  var i;
  var slides=document.getElementsByClassName("mySlides");
console.log(slides);
  var dots=document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display="none";
  }
  slideIndex++;
if (slideIndex>slides.length) {
  slideIndex=1;
}
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)

setInterval(showSlide,6000)

对于问题标题，我感到很抱歉，我无法想出一个更好的标题来描述我的情况，任何关于更好标题的建议都会被接受，以帮助其他正在为同样的问题而苦苦挣扎的人找到解决方案，并在此先感谢您。

最佳答案

只需将以下内容添加到“.dotz”

.dotz{
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

要居中任何具有 position:absolute 的 block ，您只需将 left, right 设置为 0 并将 margin 设置为 auto 并确定父级div 必须有 position:relative

关于javascript - 响应 slider 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55083066/

26 4 0
文章推荐： python - 使用 matplotlib 在 Python 中未显示绘图
文章推荐： javascript - Node Express.js 4 路由不工作，出现 404
文章推荐： python - 如何使用 boto3 在一个 describe[resource] 中制作多个过滤器？
文章推荐： c - 警告 : unused variable
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com