Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 21
  1. #1

    creare vari slider d'immagini in una pagina html

    Ciao ragazzi,
    devo inserire in una pagina html diversi banner nella colonna di destra, uno sotto l'altro.

    Poichè i banner sono veramente tanti, ho creato un circuito di 3 banner a rotazione e vorrei crearne altri sulla stessa pagina, uno sotto l'altro.
    Esempio: cella 1: banner A,B,C - Sotto cella 2: banner D,E,F - ecc..

    Con questo codice, salvato in un file banner.js riesco a far funzionare i 3 banner nella cella 1:

    var imm = new Array();
    imm[0] = "bannerA.jpg";
    imm[1] = "bannerB.jpg";
    imm[2] = "bannerC.gif";

    var lnk = new Array();
    lnk[0] = "http://www..../";
    lnk[1] = "http://www...../";
    lnk[2] = "http://www....../";

    var x = 0;

    var mostra = document.getElementById("banner");

    function mostra_banner()
    {
    mostra.innerHTML = "[img]" + imm[x] + "[/img]";
    window.setTimeout("mostra_banner()", 3000);
    imm.length - 1 == x ? x = 0 : x++;
    }

    Come faccio a creare altri circuiti con immagini diverse nella stessa pagina html?

    Ho provato a creare un file "banner2.js" e a richiamarlo nella pagina html ma si sovrappone al primo.

    Gentilmente potete aiutarmi? Ve ne sarei veramente grata...

    Barbara

  2. #2
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Banner</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript">
    var imm = new Array();
     imm[0] = "immagine-1.jpg";
     imm[1] = "immagine-2.jpg";
     imm[2] = "immagine-3.gif";
     imm[3] = "immagine-4.png";
     imm[4] = "immagine-5.bmp";
     imm[5] = "immagine-6.gif";
     
    var lnk = new Array();
     lnk[0] = "http://www.google.it/";
     lnk[1] = "http://www.google.it/";
     lnk[2] = "http://www.google.it/";
     lnk[3] = "http://www.google.it/";
     lnk[4] = "http://www.google.it/";
     lnk[5] = "http://www.google.it/";
     
    var div = new Array();
     div[0] = "mostra";
     div[1] = "mostra2";
     div[2] = "mostra3";
    
    var x=0;
    
    window.onload=function(){
    	mostra_banner();
    }
    function mostra_banner(){
    	for (var i=0; i<div.length; i++){
    		$('#'+div[i]).fadeOut(250, function(){
    			$(this).html("[img]" + imm[x] + "[/img]");
    			$(this).fadeIn(500);
    			if(imm.length - 1 == x ){
    				 x = 0;
    			}else{
    				x++;
    			}
    		});
    	}
    	setTimeout('mostra_banner()',3000);
    }
    </script>
    </head>
    
    <body>
    <div id="mostra"></div>
    <div id="mostra2"></div>
    <div id="mostra3"></div>
    </body>
    </html>
    jquery powered

  3. #3
    Perfetto!!
    Grazie Lucavizzi, sei stato molto utile.

    Mi permetto di chiederti un'altra cosa: con il codice che mi hai fornito ho una visione bifacciale (3 banner, 6 immagini oppure 4 banner, 8 immagini ecc.).

    E' possibile far girare 3 immagini su un banner? (3 banner, 9 immagini ecc.)

    Grazie

    Barbara72

  4. #4
    Ciao Barbara72.
    Il numero delle immagini è indipendente dal numero dei box che le contengono.
    puoi far girare tute le immagini in un unico box:

    var div = new Array();
    div[0] = "mostra";

    oppure su due box:

    var div = new Array();
    div[0] = "mostra";
    div[1] = "mostra2";

    oppure tre (come nell'esempio)
    var div = new Array();
    div[0] = "mostra";
    div[1] = "mostra2";
    div[2] = "mostra3";


    oppure quattro o cinque, ecc.

    Nella funzione "mostra_banner" puoi anche sostituire "fadeOut" e "fadeIn" rispettivamente con "slideUp" e "slideDown", otterrai un effetto di comparsa e scomparsa diverso, provaci.

  5. #5
    Benissimo,
    sei stato di grande aiuto.
    Grazie ancora
    Barbara72

  6. #6
    Prego

    Per essere davvero completo, è necessario un preload delle immagini:

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rotazione Banner</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript">
    var imm = new Array();
     imm[0] = "immagine-1.jpg";
     imm[1] = "immagine-2.jpg";
     imm[2] = "immagine-3.gif";
     imm[3] = "immagine-4.png";
     imm[4] = "immagine-5.bmp";
     imm[5] = "immagine-6.gif";
     
    var lnk = new Array();
     lnk[0] = "http://www.google.it/";
     lnk[1] = "http://www.google.it/";
     lnk[2] = "http://www.google.it/";
     lnk[3] = "http://www.google.it/";
     lnk[4] = "http://www.google.it/";
     lnk[5] = "http://www.google.it/";
     
    var div = new Array();
     div[0] = "mostra";
     div[1] = "mostra2";
     div[2] = "mostra3";
    
    var x=0;
    
    window.onload=function(){
    	preload();
    	mostra_banner();
    }
    function mostra_banner(){
    	for (var i=0; i<div.length; i++){
    		$('#'+div[i]).fadeOut(250, function(){
    			$(this).html("[img]" + imm[x] + "[/img]");
    			$(this).fadeIn(500);
    			if(imm.length - 1 == x ){
    				 x = 0;
    			}else{
    				x++;
    			}
    		});
    	}
    	setTimeout('mostra_banner()',3000);
    }
    function preload() {
    	var imageObj = new Image();
    	for(var j=0; j<imm.length; j++) {
    		imageObj.src=imm[j];
    	}
    }
    </script>
    </head>
    
    <body>
    <div id="mostra"></div>
    <div id="mostra2"></div>
    <div id="mostra3"></div>
    </body>
    </html>

  7. #7
    Buon giorno a tutti;

    Ho seguito la discussione ed anche io ho seguito il consiglio di "lucavizzi" in merito al javascript code. Mi è sembrata una buona soluzione adattabile ad mie esigenze per la costruzione di una pagina in html.

    Ho eseguito alla lettera le istruzioni riportate e devo dire che lo script funziona alla grande.

    Quindi ho pensato di adattare lo script alle mie esigenze, le quali prevedono una sezione di visualizzazione temporale di banner a rotazione 200x600, una sezione di visualizzazione temporale di teso in link, una visualizzazione temporale di 5 banner in 5 div univoci a loro volta contenuti in un unico div che non è dichiarato nello script ma formattato con css esterno alla pagina ed allo script. (anche il div banner 200x600 e contenuto in un'altro con le identiche caratteristice del contenitore dei div dei 5 banner di dimensioni più piccole.

    Per non appesantire il codice html e quindi il download della pagina ho creato dei file Js esterni che vengono richiamati dal -script language="javascript" scr="none.js" tipe=ecc,ecc,- .

    Se si applica un solo .js e il relativo .js che richiama la iquery tutto funziona perfettamente.

    Il problema nasce nel momento in cui si richiama un secondo .js che dovrebbe far girare altri banner nella stessa pagina o richiamando un secondo .js che dovrebbe far visualizzare dei link a rotazione temporale.

    Cosa succede?
    Se richiamo 2 .js che dovrebbero svolgere ognuno una propria funzione di visualizzazione completamente differente sia nei tempi che nei contenuti, succede che se visualizzi uno l'altro scompare, se visualizzi l'altro l'uno scompare, pur riconoscendo che gli script sono contemporaneamente in esecuzione. In sintesi se ne visualizza uno è gli altri non si vedono e non danno nemmeno errore per il debug.

    Nei 2 .js vi è lo stesso codice ovviamente con le opportune e piccolissime modifiche apportate perchè si differenzino tra loro e spero non creino conlitti.

    Ma insieme proprio non vanno. (sono 5 notti che tento e ritento ma niente)

    Domanda:
    Oltre a quello che ho gia fatto; cosa devo fare per far si che ogni .js faccia la sua fuzione senza che influenzi l'atro che usa la stessa IQuery?

    Tra un Js e l'altro ho reso differenti le var aggiungendo un numero alla nome dichiarato.
    2 js gestiscono contenuti per un solo div a testa con id differente
    1 js gestisce contenuti per 5 div univoci

    Ho anche provato a modificare la IQuery ($) assegnandogli il nome dei div e la var (i) dichiarando il nome univoco del div, ho anche assegnato un'incognita (x) differente in ogni .js ed altre prove ancora ed ancora... ma niente, il risultato non cambia.

    Qual'è la soluzione? Se ne esiste una!!

    Credo non sia necessario postare il codice perchè fondamentalmente è lo stesso qui abbondantemente visibile.

    Grazie a chiunque mi risponda ma sopratutto un gigantesco grazie a chi mi rifila la dritta giusta.

  8. #8
    devi cambiare anche il nome delle funzioni "mostra_banner" e "preload".

  9. #9
    Ciao lucavizzi;

    Grazie per avermi risposto.
    Avevo già cambiato il nome della funzione (mostra_banner) senza risultato.
    Nella tua risposta pensavo di aver ottenuto soluzione perchè l'unico nome di funzione che non avevo toccato era proprio il PreLoad; ma pur avendolo completamente stravolto il risultato non cambia.

    A questo punto ti posto il codice affinchè possa dare un'occhiata.

    Preannunciandoti che lo script per i banner l'ho reso commento per disattivarlo e lasciare libero quello deil link ed anche per consentire il test inverso in modo da verificare il corretto funzionamento dei 2 script se eseguiti singolarmente; mentre il problema nasce se gli script vengono attivati in contemporanea. (come in realtà dovrebbero funzionare.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>test 1</title>


    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>




    <script language="javascript" type="text/javascript">
    var imm = new Array();
    imm[0] = "La gallina";
    imm[1] = "Il pollo";
    imm[2] = "Il gallo";

    var lnk = new Array();
    lnk[0] = "http://www.google.it/";
    lnk[1] = "http://www.google.it/";
    lnk[2] = "http://www.google.it/";

    var div = new Array();
    div[0] = "mostra";

    var x=0;

    window.onload=function(){
    preloadlinks();
    mostra_links();
    }

    function mostra_links(){
    for (var mostra=0; mostra<div.length; mostra++){
    $('#'+div[mostra]).fadeOut(250, function(){
    $(this).html("" + imm[x] + "");
    $(this).fadeIn(500);
    if(imm.length - 1 == x ){
    x = 0;
    }else{
    x++;
    }
    });
    }
    setTimeout('mostra_links()',3000);
    }

    function preloadlinks() {
    var imageObj = new Image();
    for(var k=0; k<imm.length; k++) {
    imageObj.src=imm[k];
    }
    }
    </script>




    <!-- script reso commento
    <script language="javascript" type="text/javascript">
    var imm2 = new Array();
    imm2[0] = "immagine1.gif";
    imm2[1] = "immagine2.jpg";

    var lnk2 = new Array();
    lnk2[0] = "http://www.google.it/";
    lnk2[1] = "http://www.google.it/";

    var div = new Array();
    div[0] = "mostra2";

    var s=0;

    window.onload=function(){
    preload();
    mostra_banner();
    }
    function mostra_banner(){
    for (var mostra2=0; mostra2<div.length; mostra2++){
    $('#'+div[mostra2]).fadeOut(250, function(){
    $(this).html("[img]" + imm2[s] + "[/img]");
    $(this).fadeIn(500);
    if(imm2.length - 1 == s ){
    s = 0;
    }else{
    s++;
    }
    });
    }
    setTimeout('mostra_banner()',5000);
    }
    function preload() {
    var imageObj = new Image();
    for(var j=0; j<imm2.length; j++) {
    imageObj.src=imm2[j];
    }
    }
    </script>
    -->


    </head>

    <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="25" valign="middle" bgcolor="#FFCCFF">
    <tr>
    <td width="100%">

    <div id="mostra" style="margin-left: 10; margin-right: 10"></div>
    </td>
    </tr>
    </table>




    <div id="mostra2" style="margin-left: 10; margin-right: 10"></div>

    </body>
    </html>

    Ancora una volta ringrazio per la tua cortese partecipazione

  10. #10
    C'è qualcuno?

    Comprensibile... con una giornata come questa meglio essere al mare che stare davanti ad un pc.

    Quasi quasi ci vado anch'io, poi per lo script ne riparliamo un'altro giorno.

    Buon divertimento ragazzi!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.