slider image con delay solo java script + link

**webinserzionista** · 17-11-2014, 13.40.25

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.

**NLSweb** · 24-11-2014, 13.15.02

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>

Discussione: slider image con delay solo java script + link

LinkBack

Strumenti discussione

Display

slider image con delay solo java script + link

Regole di scrittura