Слайд-шоу Javascript не будет отображать первый массив, пока кнопка не нажата - PullRequest
Новая
       24

Слайд-шоу Javascript не будет отображать первый массив, пока кнопка не нажата

1 голос
/ 28 июня 2019

Мое слайд-шоу прекрасно работает, за исключением случаев, когда страница загружается изначально. Для начала я установил свой CSS на «display: none», затем Javascript просматривает изображения для отображения их в виде встроенных блоков при нажатии следующей кнопки. Но первое изображение отображается как «none» для начала.

Я уверен, что есть способ просто отобразить первое изображение, сохраняя все изображения после скрытия. Я довольно новичок в этом.

Я следовал инструкциям на w3schools.com здесь: https://www.w3schools.com/howto/howto_js_slideshow.asp

Вы можете увидеть мой полный код и продукт на моем коде: https://codepen.io/catherinehh/pen/orpeJV

CSS: 

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.slideImg {
 display: none;
}

JAVASCRIPT: 

var slideIndex = 1;

function nextSlide(n){
 showSlides(slideIndex += n);
}

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

function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("slideImg");
  if (n > slides.length){
   slideIndex = 1;
  }
  if (n < 1){
   slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
  }
   slides[slideIndex-1].style.display = "inline-block";
}

По сути, я построчно следовал учебному пособию на w3schools.com, и я не могу найти, чем мой код отличается от учебного. Он должен работать так же, как слайд-шоу на этой странице.

Любая помощь приветствуется! Спасибо!

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Если вы хотите, чтобы слайдер начал работать при загрузке страницы, вы можете вызвать первый слайд в конце кода выше: 

showSlides(slideIndex);

Для большей уверенности (поскольку я не знаю, куда вы помещаете скрипт на своей странице, если в заголовке или после тега Body) вы можете использовать <body onload="showSlides(1)">, чтобы отложить функцию ползунка после полной загрузки страницы.

Если вы хотите сначала показать первое изображение и запустить ползунок при щелчке, используйте правило CSS, чтобы исключить первое скрытое изображение: 

.slideImg:first-of-type {
 display: block;
}
0 голосов
/ 28 июня 2019

Вы забыли инициализировать ползунок, вызвав showSlides(slideIndex)

var slideIndex = 1;

function nextSlide(n){
  showSlides(slideIndex += n);
}

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

function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("slideImg");
  if (n > slides.length){
    slideIndex = 1;
  }
  if (n < 1){
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "inline-block";
}
showSlides(slideIndex)
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.slideImg {
  display: none;
}
<div class="wrapper">


  <header>

    <h1>Catherine Hill Hyman</h1>
    <p>Professional Creations</p>

  </header>


  <main>

    <section class="designSection">
      <h2>Design</h2>
    </section>


    <section class="developmentSection">
      <h2>Web Development</h2>
    </section>


    <section class="photoSection">
      <h2>Photography</h2>

      <!-- begin photo slideshow-->
      <div class="photoSlideshow">

        <button name="prevButt" onclick="nextSlide(-1)">&#10094;</button>

        <div class="slideImg">
          <img id="uncleBud" src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/58378586_10157043937729774_1705977854832934912_n.jpg?_nc_cat=111&_nc_oc=AQl-LK_lpsqPa3rT2zTbc5KJpNNZECz9jxm15Xk0bNbYjtTklfxf34uVybG2xSjjffA&_nc_ht=scontent.fcae1-1.fna&oh=c5b64ef84d76c6d7ef2a9b9409e12637&oe=5DBFF07F"
            alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
        </div>

        <div class="slideImg">
          <img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/61008492_10157093314404774_1267282211523002368_o.jpg?_nc_cat=111&_nc_oc=AQldqecidxJd5LhQsCrYpnGnQ3mmLDqqMe9OGcChpmZyP82vSw7oBZvBDCZfbYktIGQ&_nc_ht=scontent.fcae1-1.fna&oh=c57a3d3827f6cab302470ec0e697f7ed&oe=5D88E446"
            alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
        </div>

        <div class="slideImg">
          <img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/59285770_10157043934564774_1801122100677705728_n.jpg?_nc_cat=107&_nc_oc=AQlfwDfzSUayQL0nmF9apZnwLzQJtIZw3KsWx2mM5P0O1x2q508-vo4lsCD6EfUD9ik&_nc_ht=scontent.fcae1-1.fna&oh=4948f8ea74480440b542e60d119e23a9&oe=5D7E8C45"
            alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
        </div>

        <button name="nextButt" onclick="nextSlide(1)">&#10095;</button>

        <script src="slideShow.js"></script>

      </div>

      <!-- end photo slideshow-->

    </section>


    <section class="writingSection">
      <h2>Writing</h2>
    </section>

  </main>
...