Visualizzazione risultati 1 fino 5 di 5

Discussione: Scroll Slideshow

  1. #1
    Guest

    Predefinito Scroll Slideshow

    Ciao a tutti, ho trovato questo codice per creare una slideshow:

    HTML:

    Codice HTML:
    <div class="slideshow-container">
    
    <div class="mySlides fade">
    <div class="numbertext">1 / 5</div>
    <img src="/image/slideshow1.jpg" style="width:100%">
    </div>
    
    <div class="mySlides fade">
    <div class="numbertext">2 / 5</div>
    <img src="/image/slideshow2.jpg" style="width:100%">
    </div>
    
    <div class="mySlides fade">
    <div class="numbertext">3 / 5</div>
    <img src="/image/slideshow3.jpg" style="width:100%">
    </div>
    
    <div class="mySlides fade">
    <div class="numbertext">4 / 5</div>
    <img src="/image/slideshow4.jpg" style="width:100%">
    </div>
    
    <div class="mySlides fade">
    <div class="numbertext">5 / 5</div>
    <img src="/image/slideshow5.jpg" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)"></a>
    <a class="next" onclick="plusSlides(1)"></a>
    
    </div>
    
    <br>
    
    <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span> 
    <span class="dot" onclick="currentSlide(5)"></span> 
    </div>
    CSS:

    Codice:
    .slideshow-container {
    max-width: 628%;
    max-height: 297px;
    position: relative;
    margin: auto;
    }
    
    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #fe7501;
    font-weight: bold;
    font-size: 25px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    }
    
    .next {right: 0; border-radius: 3px 0 0 3px;}
    
    .prev:hover, .next:hover {background-color: #000000;}
    
    .numbertext {
    color: #ffffff;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    font-weight: bold;
    }
    
    .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
    
    .active, .dot:hover {background-color: #717171;}
    JS:

    Codice:
    <script>
    var slideIndex = 1;
    showSlides(slideIndex);
    
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }
    
    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";
    }
    </script>
    Ora volevo sapere come aggiungere un effetto scroll, cioè, che l'immagine vada avanti da sola anche quando non si cliccano i pulsanti. Non me ne intendo di JS e chiedo a voi.

    Grazie.

  2. #2
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,064

    Predefinito

    Vedo un:
    Codice:
    onclick="plusSlides(1)
    Quindi per far avanzare di uno devi richiamare quella funzione.
    Per richiamare una funzione ogni tempo predefinito scelto da te, dovresti usare setInterval.

    Ciao!

  3. #3
    Guest

    Predefinito

    Ho provato ma non ci sono riuscito, non sono capace ad utilizzare JS.

    Edit: ho aggiunto questo codice ed ha funzionato, grazie.

    Codice:
    setInterval('plusSlides(1);',5000);
    Ultima modifica di kolopsite : 19-08-2018 alle ore 19.35.07

  4. #4
    calcmore non è connesso Utente giovane
    Data registrazione
    05-05-2018
    Messaggi
    69

    Predefinito

    ciao, l'ho usato da poco per questo timer: https://calcmore.altervista.org/timer.php

    per avviare dovresti fare:
    Codice:
    myInterval = setInterval(plusSilides(1),5000);
    per fermare invece, dovresti fare:
    Codice:
    clearInterval(myInterval);

  5. #5
    Guest

    Predefinito

    Ho già risolto ma grazie mille :)

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •