Всем привет. Я нашел на w3schools.com слайдер и уже внедряю его; Вы можете видеть это здесь. В учебнике w3schools есть скрипт для добавления автовоспроизведения, но в данном случае это тот или иной скрипт. ¿...

2
Diego Diaz 13 Янв 2021 в 18:49

1 ответ

Лучший ответ

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

N.B. Я добавил id к вашей следующей кнопке, чтобы не было путаницы в том, на какой элемент нажимать. Использование имен классов не рекомендуется, если вы хотите использовать .next где-нибудь еще.

Код полностью прокомментирован.

Дай мне знать, если тебе что-нибудь понадобится.

// Start autoplaying automatically
var autoplayInterval = setInterval(function() {

    // Get element via id and click next
    document.getElementById("next").click();
    
   
  }, 1000); // Do this every 1 second, increase this!

// Stop function added to button
function stopAutoplay() {

  // Stop the autoplay
  clearInterval(autoplayInterval);

}

var slideIndex = 1;
showSlides(slideIndex);

// Start autoplaying automatically
var autoplayInterval = setInterval(function() {

    // Get element via id and click next
    document.getElementById("next").click();
    
   
  }, 1000); // Do this every 1 second, increase this!

// Stop function added to button
function stopAutoplay() {

  // Stop the autoplay
  clearInterval(autoplayInterval);

}



// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  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";
}
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">

  <!-- Slideshow container -->
  <div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade" style="display: block;">
      <div class="numbertext">1 / 3</div>
      <a href="https://www.google.com/" target="_lank"><img src="https://acrip.co/wp-content/uploads/2021/01/banner-panel-enero-19.jpg" style="width:100%"></a>
      <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade" style="display: none;">
      <div class="numbertext">2 / 3</div>
      <a href="https://espanol.yahoo.com/" target="_blank"><img src="https://acrip.co/wp-content/uploads/2021/01/banner-webinar-soluciones-20-3.jpg" style="width:100%"></a>
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade" style="display: none;">
      <div class="numbertext">3 / 3</div>
      <a href="https://www.usatoday.com/" target="_blank"><img src="https://acrip.co/wp-content/uploads/2020/12/slider_3-kactus.jpg" style="width:100%"></a>
      <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a id="next" class="next" onclick="plusSlides(1)">❯</a>
  </div>
  <br>

  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot active" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
  <br>


  <button id="stopAutoplayButton" onclick="stopAutoplay();">Stop</button>


</body>
0
Oliver Trampleasure 13 Янв 2021 в 16:22