Слайд изображения не работает должным образом с CSS - PullRequest
Новая
       7

Слайд изображения не работает должным образом с CSS

0 голосов
/ 16 февраля 2019

Я пытался включить некоторый код для слайд-шоу изображений на свой сайт, но из-за существующего CSS слайд-шоу не работает должным образом.

Когда я беру код слайд-шоу из CSS, он появляется как один элемент изображения на экране, который меняет свой img src каждые 2 секунды, что является правильным поведением.

Когда я помещаюкод внутри CSS, два разных элемента изображения появляются на экране в строке.Я весь день играл с CSS и не могу понять, как это исправить.Я уверен, что это что-то простое.Любая помощь будет приветствоваться. 

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds}
#banner .content .image {
  border-radius: 100%;
  display: inline-block;
  height: 18em;
  margin-left: 3em;
  vertical-align: middle;
  width: 18em;
}

#banner .content .image img {
  border-radius: 100%;
  display: block;
  width: 100%;
}
<section id="banner">
  <div class="content">
    <header>
      <h2>header text</h2>
      <p>more text<br />
      </p>
    </header>
    <span class="image"><img class="mySlides" src="images/pic01.jpg" alt="" 
        /></span>
    <span class="image"><img class="mySlides" src="images/pic02.jpg" alt="" 
        /></span>
  </div>

Ответы [ 3 ]

0 голосов
/ 16 февраля 2019

В вашем JS есть опечатка: последний встроенный комментарий отключает закрывающую скобку функции. 

// Change image every 2 seconds}
                             ^^^^^

Просто удалите комментарий, и ваш код заработает.

0 голосов
/ 16 февраля 2019

Я понял это.Мне нужно было обернуть ОБА изображения только в один промежуток 

<span class="image"><img class="mySlides" src="images/pic01.jpg" alt="" />
<img class="mySlides" src="images/pic02.jpg" alt="" /></span>
0 голосов
/ 16 февраля 2019

В вашем примере кода в вашем JavaScript отсутствует закрывающая скобка (закрывающая скобка технически находится внутри комментария JavaScript).Как только я это очистил, кажется, все работает. 

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds}
}
#banner .content .image {
  border-radius: 100%;
  display: inline-block;
  height: 18em;
  margin-left: 3em;
  vertical-align: middle;
  width: 18em;
}

#banner .content .image img {
  border-radius: 100%;
  display: block;
  width: 100%;
}
<div class="content">
  <header>
    <h2>header text</h2>
    <p>more text<br />
    </p>
  </header>
  <span class="image"><img class="mySlides" src="http://placekitten.com/200/300" alt="" 
    /></span>
  <span class="image"><img class="mySlides" src="http://placekitten.com/200/200" alt="" 
    /></span>
</div>

jsFiddle

...