Question

我想使用dsonesuk在W3Forum上提供的this code制作幻灯片。
我对其进行了修改，使其接近我想要的。现在，JS对幻灯片的位置做了两个奇怪的事情：

在较小的（例如移动设备）浏览器窗口中，＃myslideFrame会在高度（应该不应该）。
在较大的浏览器窗口（宽于1260像素）中，整个幻灯片粘贴在包装器的左侧，而不是一直延伸到包装器的右侧。

由于我不十分了解JS为何如此运行，因此这是整个页面的代码。（特别是CSS很长，对此感到抱歉。但是，您可以在“ slideshow”中使用“ 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="https://i.stack.imgur.com/W0mZQ.jpg">
        <img class="mySlides fade" src="https://i.stack.imgur.com/9djAf.jpg">
        <img class="mySlides fade" src="https://i.stack.imgur.com/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();
};

下一步是将旋转木马的水平对齐固定在桌面上，这是迄今为止最容易的事情。您的幻灯片是一个内联块，这意味着可以通过为父级设置text-align: center样式来使其居中。

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

JS弄乱了幻灯片的位置

1 个答案: