[RISOLTO]Inserimento Slide Html

maurizio · 1 Feb 2013

Ciao a tutti

Mi servirebbe un consiglio per l'inserimento di una slide che visualizzi 3/4 immagini nel tempo che stabilirò io.
Inoltre non vorrei usare cms o richiami verso altre pagine. è possibilie fare una cosa del genere?scrivere direttamente il codice in HTML o in CSS o in JAVASCRIPt.

Cosa mi consigliate di fare?

Grazie in anticipo per la risposta.

Maurizio

criric · 3 Feb 2013

Ciao,
potresti fare in questo modo

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            window.onload = function(){
                
                var immagini = new Array();
                immagini[0] = "DOC.png";
                immagini[1] = "JS.png";
                immagini[2] = "PSD.png";
                immagini[3] = "ASP.png";
                
                var immagine = document.getElementById("slide");
                var tempo = 3000; // tempo per il cambio immagine
                var i = 0; // incrementatore
                var dir = "img/icon_file/"; // percorso della cartlla immagini
                
                setInterval(function(){
                    
                    immagine.src = dir + immagini[i];
                    i++;
                    if(i == immagini.length - 1 ) i = 0;
                    
                },tempo);
                
            }
        </script> 
    </head>
    <body>
        <img id="slide" src="img/icon_file/ASP.png" alt="img"/>
    </body>
</html>

in pratica la funzione cambia l'immagine ogni tot di tempo
una cosa piuttosto semplice e senza nessun richiamo a librerie esterne

eidos · 13 Giu 2013

inserimento link <a href=

Perfetto questo script, proprio quello che cercavo!
Ma si potrebbe inserire anche un <a href= alle immagini?
grazie

criric · 14 Giu 2013

Ciao, pui modificare cosi

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            window.onload = function(){
                
                var immagini = new Array();
                immagini[0] = "DOC.png";
                immagini[1] = "JS.png";
                immagini[2] = "PSD.png";
                immagini[3] = "ASP.png";
                
                var links = new Array();
                links[0] = "http://www.w3schools.com/";
                links[1] = "http://www.php.net";
                links[2] = "https://www.mrw.it";
                links[3] = "http://www.google.it";
                
                var immagine = document.getElementById("slide");
                var link = document.getElementById("link");
                
                var tempo = 3000; // tempo per il cambio immagine
                var i = 0; // incrementatore
                var dir = "img/"; // percorso della cartlla immagini
                
                setInterval(function(){
                    
                    immagine.src = dir + immagini[i];
                    link.href = links[i];
                    i++;
                    if(i == immagini.length) i = 0; // tolto il -1
                    
                },tempo);
                
            }
        </script> 
    </head>
    <body>
        <a id="link" href="http://www.google.it"><img id="slide" src="img/ASP.png" alt="img"/></a>
    </body>
</html>

ho fatto una modifica nel codice perche prima non visualizzava mai l'ultima immagine

bibbul_dex · 2014-08-22T03:18:03+0200

Salve, scusate se riapro questa discussione, era per non aprirne una nuova visto che già c'è ne una ma se è necessario ne apro un'altra, comunque passando al dunque vi volevo chiedere come applicare un effetto di animazione a questo slider... un effetto fade o slide o qualche altro effetto... Grazie e buonanotte

machopicho · 2016-08-31T16:55:59+0200

criric ha scritto:

Ciao,
potresti fare in questo modo

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            window.onload = function(){
             
                var immagini = new Array();
                immagini[0] = "DOC.png";
                immagini[1] = "JS.png";
                immagini[2] = "PSD.png";
                immagini[3] = "ASP.png";
             
                var immagine = document.getElementById("slide");
                var tempo = 3000; // tempo per il cambio immagine
                var i = 0; // incrementatore
                var dir = "img/icon_file/"; // percorso della cartlla immagini
             
                setInterval(function(){
                 
                    immagine.src = dir + immagini[i];
                    i++;
                    if(i == immagini.length - 1 ) i = 0;
                 
                },tempo);
             
            }
        </script>
    </head>
    <body>
        <img id="slide" src="img/icon_file/ASP.png" alt="img"/>
    </body>
</html>

in pratica la funzione cambia l'immagine ogni tot di tempo
una cosa piuttosto semplice e senza nessun richiamo a librerie esterne

Salve,
ho la necessità di creare un file html dove poter far girare le immagini su pc locale...
E' possibile utilizzare questo codice?
Grazie per l'attrenzione

Saluti

[RISOLTO]Inserimento Slide Html

maurizio

Utente Attivo

criric

Super Moderatore

eidos

Nuovo Utente

criric

Super Moderatore

bibbul_dex

Nuovo Utente

machopicho

Nuovo Utente

Discussioni simili

[RISOLTO]Inserimento Slide Html

maurizio

Utente Attivo

criric

Super Moderatore

eidos

Nuovo Utente

criric

Super Moderatore

bibbul_dex

Nuovo Utente

machopicho

Nuovo Utente

Discussioni simili

Privacy & Transparency

Privacy & Transparency