Visualizzazione risultati 1 fino 2 di 2

Discussione: slider image con delay solo java script + link

  1. #1
    webinserzionista non è connesso Utente giovane
    Data registrazione
    18-04-2013
    Messaggi
    50

    Red face slider image con delay solo java script + link

    Salve. vorrei creare uno slider di immagini semplicissimo. Fatto di immagini e un link per immagine, che reindirizza a una pagina.
    Vorrei, però, che tutto il codice si trovasse in un unico file. Senza Jquery che rimandano a file esterni, senza file .css.
    Anche le immagini si devono trovare con il link dentro il java script.
    Poi con <script type="text/javascript" src="../js/nome_file.js"></script> richiamo il javascript nel file .html.

    non conosco il linguaggio java. C'è qualcuno che può aiutarmi?

    grazie.

  2. #2
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    654

    Predefinito

    quindi vuoi un che il tutto sia eseguito da JS , senza CSS e jQuery ...

    ecco un esempio "semplicissimo" ... DEMO

    Codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="generator" content="AlterVista - Editor HTML"/>
      <title>SLIDESWOW</title>
      <script>
        function inizio(){  
        
         var slide = document.getElementById("slide");
         var foto1 = document.getElementById("foto1");
         var foto2 = document.getElementById("foto2");
         
         slide.style.overflow = "hidden";
         slide.style.width = "300px";
         slide.style.height = "300px";
         slide.style.boxShadow = "0px 0px 5px black";    
         foto1.style.width = "300px";
         foto1.style.height = "300px";    
         foto2.style.width = "300px";
         foto2.style.height = "300px";
        
         slideshow(5,4000);       
         
        }
        
        /* Argomenti funzione: 
           n -> il numero totale di foto
           t2 -> il tempo in millisecondi di intervallo
        */
        function slideshow(n,t2){
         /* inizializzo le variabili e gli elementi */
         var x = 0;
         var txt = 0;
         var stato = 1;
         
         var foto1 = document.getElementById("foto1");
         var foto2 = document.getElementById("foto2");
         
         foto2.style.visibility="hidden";
         foto2.style.left="100%";
         foto2.style.visibility="visible";      
         foto1.setAttribute("src", fotografie(x,n));
    
         x++;
         foto2.setAttribute("src", fotografie(x,n));
         
         /* eseguo l'intervallo dello slide */
         var intervallo = setInterval(function(){
           x++;txt++;
           if(x>n-1){x=0;}
           if(txt>n-1){txt=0;}
           stato = cambiaSlide(x,n,stato);
         },t2);
        }
        
       
        /* Argomenti funzione: 
           x -> la foto che si sta visualizzando 
           n -> il numero totale di foto
           stato -> la posizione dello slide
        */ 
        function cambiaSlide(x,n,stato){
         if(stato==1){
          var elemento1 = document.getElementById("foto1");
          var elemento2 = document.getElementById("foto2");
         }else{
          var elemento1 = document.getElementById("foto2");
          var elemento2 = document.getElementById("foto1");
         }
              
            elemento2.style.left="0%";
            elemento1.style.left="-100%";
            elemento1.style.visibility="hidden";
            elemento1.style.left="100%";
            elemento1.style.visibility="visible";
            elemento1.setAttribute("src", fotografie(x,n));  
       
         if(stato==1){stato=0;}else{stato=1;}
         return stato;
        }
        
        
        /*
           Argomenti funzione:
           x -> la foto che si sta visualizzando
           n -> il numero totale di foto
        */
        function fotografie(x,n){
         var foto = new Array(n);
         /* scrivere il path ed il nome delle foto che volere usare */
         foto[0] = "foto/1.jpg";
         foto[1] = "foto/2.jpg";
         foto[2] = "foto/3.jpg";
         foto[3] = "foto/4.jpg";
         foto[4] = "foto/5.jpg";
         
         return foto[x];
        }
        
      </script>
    </head>
    <body onload="inizio()">
    
    <div id="slide">
     <img id="foto1" src="" />
     <img id="foto2" src="" />
    </div>
    
    </body>
    </html>

Regole di scrittura

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