javascript - JS 搞乱了幻灯片的定位

Question

我想使用 this code 制作幻灯片dsonesuk 在 W3Forum 上提供。
我修改了它以接近我想要的。现在 JS 对幻灯片的位置做了两件奇怪的事情:

1. 在较小的(例如移动)浏览器窗口中，#myslideFrame 扩展为高度(不应该)。
2. 在较大的浏览器窗口(宽度超过 1260 像素)中，整个幻灯片会粘在包装的左侧，而不是一直延伸到(包装的)右侧。
   

由于我不完全知道为什么 JS 会这样，所以这是整个页面的代码。 (特别是 CSS 很长，对此感到抱歉。但是您可以使用“cmd/Strg + F”进行“幻灯片放映”，它会突出显示相关部分的开头)
谢谢!

var slideIndex = 0;
var t;
var dots;
var maxheight = 0;
var timedelay = 3700;

window.onload = function() {
  var x = document.getElementsByClassName("mySlides");
  var parent_elem = document.getElementById('myslideFrame')
  var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)

  for (i = 0; i < x.length; i++) {

    if (x[i].height > maxheight) {
      maxheight = x[i].height;
    }
  }

  document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";
  showDivs(slideIndex);
  carousel();
};

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  dots = document.getElementsByClassName("demo");

  if (n > x.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = x.length;
  }

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" w3-border-red", "");

  }

  x[slideIndex - 1].style.display = "inline-block";
  dots[slideIndex - 1].className += " w3-border-red";

}

function carousel() {

  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    dots[i].className = dots[i].className.replace(" w3-border-red", "");
  }
  slideIndex++;

  if (slideIndex > x.length) {
    slideIndex = 1
  }

  x[slideIndex - 1].style.display = "inline-block";
  dots[slideIndex - 1].className += " w3-border-red";
  t = setTimeout(carousel, timedelay);
}

function pauseCarousel() {
  clearTimeout(t)
}

function startCarousel() {
  t = setTimeout(carousel, timedelay);
}

* {
  margin: 0;
  padding: 0;
}


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}


/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}


/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}


/* Mein Code */

:root {
  --lightGrey: #eeeeee;
  --midGrey: #4d4d4d;
  --darkGrey: #1e1e1e;
  --Color1: #91d3f5;
  --Color2: #e24e42;
}

body {
  background-color: var(--lightGrey);
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.wrapper {
  margin: 0 auto;
  width: 90vw;
}

a {
  outline: 0;
  text-decoration: none;
  color: var(--Color2);
}

.mainnav {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.mainnav ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}

.mainnav ul li {
  display: block;
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
}

.mainnav ul li a {
  display: inline-block;
  margin: 0 0 0 1px;
  padding: 0 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #333333;
  text-decoration: none;
  line-height: 40px;
}

#light {
  color: var(--lightGrey);
  font-weight: 300;
}

#logo p {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  float: left;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  color: #333333;
  letter-spacing: 0.3em;
  z-index: 2;
}

.intro {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: var(--darkGrey);
  float: left;
  text-align: center;
  width: 60vw;
  position: absolute;
  bottom: 2vh;
}

#introTextHello {
  padding-bottom: 20px;
  letter-spacing: 0;
  font-size: 145px;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  /* Firefox */
  -webkit-animation: fadein 2s;
  /* Safari and Chrome */
  -o-animation: fadein 2s;
  /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#introText {
  display: none;
}

header {
  height: 100vh;
  background-image: url(img/PortraitMobile2.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Ab hier beginnt der Introtext (ohne introTextHello) der Mobile-Version */

.mobileIntroSection {
  scroll-snap-align: start;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: var(--Color2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

#introTextMobile h1 {
  text-align: left;
  padding-top: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}


/* Ab hier beginnt der Projektteil */

.premiumFeaturedProjectSection {
  display: none;
}

.featuredProjectsSection {
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}


/*Das ist die Flexbox für die Projekte*/

.projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.featuredProjectPicture {
  position: relative;
  width: 75vw;
  height: 25vh;
  background-color: black;
  overflow: hidden;
  margin: 1.5vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

.bgimage {
  display: block;
  width: 100%;
  height: auto;
  /*
	mix-blend-mode: screen;
	-webkit-filter: grayscale(10%) contrast(200%);
  	filter: grayscale(30%) contrast(90%);
  	*/
}

.projectTitleSubtitle {
  width: 80%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.projectTitleSubtitle hr {
  border-style: none;
  margin: 15px auto 30px auto;
  width: 50%;
  height: 3px;
  background-color: var(--Color1);
}

.projectTitleSubtitle span {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  font-weight: 200;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  background-color: var(--darkGrey);
}

.callToActionSection {
  scroll-snap-align: end;
  background-color: var(--Color1);
  text-align: center;
  scroll-snap-align: end;
  padding: 50px 0 50px 0;
}

.callToActionSection h2 {
  line-height: 1.3;
}


/* Ab hier beginnt der footer */

footer {
  padding-top: 30px;
  height: 250px;
  background-color: var(--darkGrey);
  scroll-snap-align: end;
}

#footerImpressum p {
  float: left;
  text-align: left;
  margin-top: 23px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  color: var(--midGrey);
  letter-spacing: 0.03em;
  line-height: 1.34;
}


/* footernav */

#footernav {
  margin-top: 13px;
  float: right;
}

#footernav ul {}

#footernav ul li {
  text-align: right;
  list-style: none;
}

#footernav ul li a {
  display: inline-block;
  margin: 0 0 0 1px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  color: var(--midGrey);
  text-decoration: none;
  line-height: 40px;
}


/* Einzelne Projektseiten */

#fluchtHeader {
  background-image: url(img/flucht/fluchtHeader.jpg);
}

#smartLogisticsHeader {
  background-image: url(img/smartLogistics/BGSmartLogisticsBig.png);
}

#blankHeader {
  background-image: none;
}

#einblickAusblickHeader {
  background-image: url(img/einblickAusblick/einblickAusblickHeader.jpg);
}

.projectPicture {
  display: block;
  float: left;
  width: 95%;
}

.wrapperSingleProject {
  padding: 50px 0 50px 5px;
  width: 90vw;
  /* wie .imgTextSized */
  margin: auto;
}

.imgTextSized {
  width: 90vw;
  padding: 0;
  margin: 25px 0;
}

.imgTotalWidthSized {
  width: 100vw;
  padding: 0;
  margin: 0;
}

.projectIntro {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 25px;
}

#visibleDesktop {
  display: none;
}

#visibleMobile {
  display: block;
}


/* 404-Seite */

.errorPage {
  text-align: center;
}

.button {
  background-color: var(--Color2);
  border: none;
  color: var(--lightGrey);
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.button:hover {
  background-color: var(--darkGrey);
  color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1 {
  text-decoration: none;
  text-align: center;
  font-size: 50px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--lightGrey);
  padding: 50px 0 10px 0;
}

h2 {
  text-decoration: none;
  text-align: center;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--lightGrey);
}

h3 {
  text-decoration: none;
  text-align: center;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #ccc;
  margin-top: 20px;
}

p {
  text-decoration: none;
  text-align: left;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: var(--darkGrey);
}

.darkGreyText {
  color: var(--darkGrey);
}

.Color2Text {
  color: var(--Color2);
}


/* Slideshow */

.slideshow {
  margin: 0 auto 0 auto;
  display: inline-block;
}

.mySlides {
  width: 100%;
  vertical-align: middle;
}

#myslideFrame {
  text-align: center;
  position: relative;
}


/* Is this still necessary? */

#myslideFrame:before,
.flexbox>div:before {
  content: "";
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.slideshowIndicators {
  width: 100%;
  text-align: center;
}

.slideshowIndexIndicator:hover {
  background-color: var(--Color1);
}

.slideshowIndexIndicator {
  cursor: pointer;
  height: 4px;
  line-height: 1000px;
  width: 60px;
  background-color: var(--midGrey);
  display: inline-block;
  text-align: center;
  margin: 0 15px;
  transition: background-color 0.4s ease;
}

.w3-border-red,
.w3-hover-border-red:hover {
  background-color: var(--Color2)!important
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.8s;
  animation-name: fade;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(.5, .3, .5, 1);
}

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

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


/* Slideshow End */


/* Responsive-Einstellungen für Desktop*/

@media only screen and (min-width: 768px) {
  body {
    scroll-snap-type: y proximity;
  }
  .wrapper {
    width: 95vw;
  }
  /* nav underline-on-hover-animation */
  .link {
    position: relative;
  }
  .link:after {
    content: '';
    width: 0;
    height: 3px;
    display: block;
    margin-top: -7px;
    right: 0;
    background-color: #fff;
    transition: width .3s ease;
    -webkit-transition: width .3s ease;
  }
  .link:hover:after {
    width: 100%;
    left: 0;
    background-color: #fff;
  }
  /* nav underline-on-hover-animation ende */
  #logo p {
    text-align: left;
  }
  .intro {
    line-height: 1.2;
    float: right;
    text-align: left;
    padding-top: 40vh;
    padding-left: 25vw;
    position: relative;
  }
  #introText {
    display: block;
    letter-spacing: 0;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
  }
  #introTextHello {
    font-size: 50px;
  }
  .mobileIntroSection {
    display: none;
  }
  header {
    background-image: url(img/Portrait2.jpg);
  }
  /* Ab hier beginnt der Projektteil */
  .featuredProjectsSection {
    scroll-snap-align: end;
    padding: 100px 0 100px 0;
  }
  /*Das ist die Flexbox für die Projekte*/
  .projects {
    flex-direction: row;
    /*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
    border: 4px solid var(--Color2);
    width: 85vw;
    /* Wenn dieser Wert verändert, auch .premiumFeaturedProjectSection ändern */
    margin: 0 auto;
    text-align: center;
    padding: 25px 0;
  }
  /*  */
  .featuredProjectPicture {
    float: left;
    width: 20vw;
    height: 20vw;
    margin: 25px;
  }
  .projectTitleSubtitle {
    top: 45%;
    font-family: 'Roboto', sans-serif;
  }
  .projectTitleSubtitle hr {
    margin: 20px auto 45px auto;
    width: 30%;
  }
  .projectTitleSubtitle span {
    font-size: 30px;
  }
  .overlay {
    transition: .5s ease;
  }
  .featuredProjectPicture:hover .overlay {
    opacity: 0.1;
  }
  .premiumFeaturedProjectSection {
    width: calc(~"60vw + 150px");
    display: inline-block;
  }
  .premiumProjectIntro {
    width: 25vw;
    float: left;
    text-align: center;
    margin: 25px 25px 25px 0;
    padding: 25px 0 0 25px;
  }
  .premiumProjectIntro input {
    display: inline-block;
    margin-top: 25px;
  }
  #premiumFeaturedProjectPicture {
    float: right;
    width: 35vw;
    height: 40vw;
    margin: 25px 0 25px 50px;
  }
  /**/
  .callToActionSection {
    padding: 50px 0 90px 0;
  }
  .callToActionSection h2 {
    margin: 25px 0;
  }
  /* Ab hier beginnt der footer */
  footer {
    height: 270px;
  }
  #footerImpressum p {
    line-height: 1.25;
  }
  #logo {
    margin-top: 7px;
    width: 50%;
    float: left;
    text-align: left;
    text-decoration: none;
    font-size: 23px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.3em;
  }
  .mainnav {
    float: right;
    width: 350px;
  }
  .mainnav ul {
    clear: right;
    float: right;
    left: 40%;
  }
  .mainnav ul li {
    line-height: 85px;
  }
  .wrapperSingleProject {
    padding: 80px 0 80px 0;
    width: 750px;
    /* wie .imgTextSized */
  }
  .imgTextSized {
    width: 750px;
  }
  #visibleDesktop {
    display: block;
  }
  #visibleMobile {
    display: none;
  }
  h1 {
    text-decoration: none;
    text-align: center;
    font-size: 50px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
  }
  h2 {
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  h3 {
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }
  p {
    text-decoration: none;
    text-align: left;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.45;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="script.js"></script>
  <link rel="shortcut icon" type="image/png" href="img/favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>John Smith Design</title>
</head>

<body>
  <nav>
    <div class="wrapper">
      <div id="logo">
        <p>JOHN SMITH</p>
      </div>

      <div class="mainnav">
        <ul>
          <li>
            <a class="link" id="light" href="#">ABOU<span style="letter-spacing:0px;">T</span></a>
          </li>
          <li>
            <a class="link" id="light" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a>
          </li>
          <li>
            <a class="link" id="light" href="#">HOM<span style="letter-spacing:0px;">E</span></a>
          </li>
        </ul>
      </div>


    </div>
  </nav>


  <header id="fluchtHeader">
    <div class="overlay"></div>
    <div class="projectTitleSubtitle">
      <h1>FACT</h1>
      <br>
      <hr>
      <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h2>
      <h3>with Johnny Jones.</h3>
    </div>
  </header>

  <div class="wrapper">
    <div class="wrapperSingleProject">
      <p class="projectIntro">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>



    <div class="slideshow">
      <div id="myslideFrame">
        <img class="mySlides fade" src="/image/W0mZQ.jpg">
        <img class="mySlides fade" src="/image/9djAf.jpg">
        <img class="mySlides fade" src="/image/LhWX8.jpg">



        <div class="slideshowIndicators">
          <span onclick="currentDiv(1)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>

          <span onclick="currentDiv(2)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>

          <span onclick="currentDiv(3)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="	startCarousel()"></span>
        </div>
      </div>
    </div>

  </div>



  <div class="callToActionSection">
    <div class="wrapper">
      <h2>Want to see more? <br> Check out my other projects!</h2>
      <br>
      <input type="submit" class='button' value="Let's go" onclick="location.href='#'">
    </div>
  </div>


  <footer>
    <div class="wrapper">
      <div id="footerImpressum">
        <p>
          Contact:<br>
          <br> John Smith <br> Johnstreet 30<br> 11111 Johntown<br>
          <br> john@smith.com
          <br> +11 (1)111 111 11 11
        </p>
      </div>
      <div id="footernav">
        <ul>
          <li><a class="link" href="#">HOM<span style="letter-spacing:0px;">E</span></a></li>
          <li><a class="link" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a></li>
          <li><a class="link" href="#">ABOU<span style="letter-spacing:0px;">T</span></a></li>
          <li><a class="link" href="#">IMPRIN<span style="letter-spacing:0px;">T</span></a></li>
          <li><a class="link" href="#">PRIVAC<span style="letter-spacing:0px;">Y</span></a></li>
        </ul>
      </div>
    </div>
  </footer>
</body>

</html>

Answer 1

好的，所以修复非常简单。你不想让这个元素的高度乱七八糟。因此，只需从执行此操作的 window.load 中删除所有内容即可。这应该给你留下这样的东西:

window.onload = function() {
    showDivs(slideIndex);
    carousel();
};

下一步是修复桌面上轮播的水平对齐方式，这是迄今为止最简单的事情。您的幻灯片是一个内联 block ，这意味着它可以通过为父级提供 text-align: center 样式来居中。

.wrapper {
    margin: 0 auto;
    width: 90vw;
    text-align: center;
}