Aggiungere onClick in uno slideshow js

**jurij7** · 14-12-2011, 00:32

ciao a tutti
vorrei inserire in questo javascript per slideshow di immagini una funzione onClick che mi permetta di avanzare anche manualmente.
il js è questo:

codice:

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs = d.getElementById('slideshow').getElementsByTagName('div');
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;

	setTimeout(so_xfade,7000);
}

function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,7000);
	}
	else
	{
		setTimeout(so_xfade,5);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

potete aiutarmi?
grazie

**cavicchiandrea** · 14-12-2011, 09:59

Di slide con avanzamento "manuale" ne trovi una marea in rete, è assurdo modificare il "tuo"

**mishima72** · 14-12-2011, 15:32

codice:

test

ad esempio

javascript senza trattino

**jurij7** · 15-12-2011, 00:02

Originariamente inviato da mishima72

codice:

test

ad esempio

javascript senza trattino

devo inserire quindi questo

codice:

test

ma in che parte del js di sopra?
grazie

**mishima72** · 15-12-2011, 01:17

quello è html

l'importante è che chiami la funzione

esempio
il js non lo toccare,includilo in un html

poi o con un

codice:

<input type="button" id="bottone" value="fade" onClick="so_xfade();"/>

**jurij7** · 15-12-2011, 10:49

io il js lo utilizzo per far scorrere questi:

codice:

 <div id="mainContent">
   <div align="center">
     <div id="slideshow">

        <div>
           [img]BW Sito/People/prima.jpg[/img]

           

<span class="style7">prima</span></p>
       </div>
     
       <div>
           [img]BW Sito/People/seconda.jpg[/img]

           

<span class="style7">seconda</span></p>
       </div>
.....
.....

questi <div> vanno in scorrimento automatico con effetto fade. io vorrei che cliccandoci su ognuno mi passi alla successiva.

mentre nell'head, richiamo il js

codice:

<head>
<link rel="stylesheet" href='slideshow.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
.....
.....

**mishima72** · 15-12-2011, 11:54

codice:

<head>


<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.pack.js”></script>
<script type="text/javascript" src="xfade2.js"></script>
<link rel="stylesheet" href='slideshow.css' type="text/css" />
<script>
$(document).ready(function(){
 $("#slideshow").click(function(){
		  so_xfade();
	});						   
                    
 });

</script>

in pratica facciamo partire la funzione so_xfade(); cliccando sul contenitore principale slideshow,se vuoi che la funzione parte cliccando su un qualsiasi punto della pagina
sostituisci nel codice $("body") al posto di $("#slideshow")

potrebbero esserci errori di sintassi,non ho testato il codice

il principio resta quello di eseguire fuori dall'intervallo la funzione fade

cmq si se fai un giro in rete ne trovi tanti di script,ma se inizi un pò a capirci qualche cosa ti sentirai davvero libero

**jurij7** · 15-12-2011, 12:46

quindi sostitusco questo nell'head, basta così?

ma questo invece cos'è?

codice:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.pack.js”></script>

p.s. ho cercato altri js ma non mi piacciono, io voglio solo aggiungere l'avanzamento manuale

**mishima72** · 15-12-2011, 12:55

quello è un framework( una serie di funzioni javascript per semplicficarne l'uso)

si chiama Jquery che davvero semplifica la scrittura del codice

**jurij7** · 15-12-2011, 12:59

Originariamente inviato da mishima72
quello è un framework( una serie di funzioni javascript per semplicficarne l'uso)

si chiama Jquery che davvero semplifica la scrittura del codice

ma la richiamo attraverso un link esterno?

Discussione: Aggiungere onClick in uno slideshow js

Strumenti discussione

Ricerca discussione

Visualizza

Aggiungere onClick in uno slideshow js

Permessi di invio