[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

Cerca

Cerca

[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