• User

    Aggiungere tasto pause/play a slideshow javascript

    Buonasera a tutti, avrei bisogno di aiuto per aggiungere un pulsante ad un semplice slideshow con autoplay per poterlo fermarlo e riavviare manualmente. Grazie mille per l'aiuto.
    Il codice è questo:

    CSS:

    
    *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    img {
      max-width: 100%;
    }
    /* Slideshow container */
    .slideshow-container {
      max-width: 800px;
      position: relative;
      margin: 40px auto;
      width: 100%;
      overflow: hidden;
    }
    
    .slideshow-nav {
      text-align: center;
      width: 100%;
      position: absolute;
      bottom: 2%;
    }
    
    .mySlides {
      width: auto;
    }
      
    /* The dots/bullets/indicators */
    .dot {
      height: 13px;
      width: 13px;
      margin: 0 2px;
      background-color: #f9f6f6;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active, .dot:hover {
      background-color: #ff0000;
    }
    
    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      padding: 6px;
      color: #fff;
      color: rgba(255, 255, 255, 0.5);
      font-weight: bold;
      font-size: 3.0rem;
      border-radius: 0 3px 3px 0;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: 0.6s ease-out;
      -moz-transition: 0.6s ease-out;
      -o-transition: 0.6s ease-out;
      transition: 0.6s ease-out;
    }
    
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    .prev:hover, .next:hover {
      background-color: black;
      color: white;
      cursor: pointer;
    }
    
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    @-webkit-keyframes fadeIn {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    

    HTML:
    [HTML]
    <!-- start slider -->
    <div class="slideshow-container">
    <!--Slide 1-->
    <div class="mySlides fadeIn">
    <img src="01.jpg">
    </div>
    <!--Slide 2-->
    <div class="mySlides fadeIn">
    <img src="02.jpg">
    </div>
    <!--Slide 3-->
    <div class="mySlides fadeIn">
    <img src="03.jpg">
    </div>
    <!--Silde 4-->
    <div class="mySlides fadeIn">
    <img src="04.jpg">
    </div>
    <a class="prev" onclick="plusSlides(-2);">❮</a>
    <a class="next" onclick="plusSlides(0)">❯</a>
    <div class="slideshow-nav">
    <span class="dot" onclick="currentSlide(0)"></span>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    </div>
    </div>
    [/HTML]

    JAVASCRIPT:

    
    var slideIndex = 1;
      var millis = 5000;
      var interval;
      var timeout;
    
      startSlides();
      function startSlides(){
        pauseSlides();
        nextSlide();
        interval = setInterval(nextSlide, millis);
      }
      function resumeSlides() {
        nextSlide();
      }
      function pauseSlides() {
        clearInterval(interval);
      }
      function nextSlide() {
        showSlide();
        slideIndex++;
      }
      function plusSlides(n) {
        clearInterval(interval);
        clearTimeout(timeout);
        slideIndex += n;
        nextSlide();
        timeout = setTimeout(startSlides, millis * 2)
      }
      function currentSlide(n) {
        clearInterval(interval);
        slideIndex = n + 1;
        nextSlide();
        interval = setInterval(nextSlide, millis);
      }
      function showSlide() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
          slides*.style.display = "none";
        }
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }
        if (slideIndex < 1) {
          slideIndex = slides.length;
        }
        for (i = 0; i < dots.length; i++) {
          dots*.className = dots*.className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
      }
    
    

  • User Attivo

    Ciao,

    aggiungi questo codice nell'HTML, dovrebbe andare

    [HTML]
    <input type="button" value="Pause" onclick="javascript:if ('Play' === this.value) {this.value = 'Pause'; startSlides();} else {this.value = 'Play'; pauseSlides();}">
    [/HTML]


  • User

    Grazie mille flaviors, dovrebbe funzionare, ci lavoro..