Script JS

**Eduadie** · 11-04-2017, 14:24

Sto provando ad utilizzare uno script JS per creare una sorta di slideshow.
Funziona bene su di un div ma se lo provo ad applicare più div contemporaneamente mi da problemi...Come posso risolvere?

codice:

/*    Image Cross Fade Redux
    Version 1.0
    Last revision: 02.15.2006
    steve@slayeroffice.com


    Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/


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','uploads/slideshow2.css');
    css.setAttribute('rel','stylesheet');
    css.setAttribute('type','text/css');
    d.getElementsByTagName('head')[0].appendChild(css);


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


    setTimeout(so_xfade,3000);
}


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,3000);
    }
    else
    {
        setTimeout(so_xfade,50);
    }


    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) + ')';
    }
}

codice:

#slideshow {    border: 1px solid #000;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 400px;
    height: 300px;
}


#slideshow img {
    width: 400px;
    height: 300px;
}

codice HTML:

<!DOCTYPE html><html><head>  <title></title>  <link rel="stylesheet" href='slideshow.css' type="text/css" />    <script type="text/javascript" src="xfade2.js"></script></head><body>

<div id="slideshow">    <img src="1.jpg" />    <img src="2.jpg" />               <img src="3.jpg" /></div>
<div id="slideshow">    <img src="1.jpg" />    <img src="2.jpg" />               <img src="3.jpg" /></div>
</body></html>

Se volete vedere una prova guardate qui: http://leopardicalcio.altervista.org/prova.html

Sicuramente si tratta che non possono esserci due id identici nella stessa pagina dovrei farlo con una class ma non ci sono riuscito se modifico tutto con una classe...qualcuno potrebbe aiutarmi?

**fermat** · 11-04-2017, 15:30

ciao!

mi viene in mente:
- usi le classi al posto dell'id, modificando anche il js sostiuendo getElementById con qualcos'altro tipo querySelector
- rendi la funzione di init parametrica, e gli passi l'id come parametro, e poi la richiami due volte
- rendi la funzione di init parametrica, e gli passi un array di id, e poi iteri sull'array

fai qualche prova con queste modalità!

**ciro78** · 11-04-2017, 20:27

ciao eduadie,
leggi regolamento in particolare la sezione del titolo. Non ti chiudo solo perchè sei nuovo.

**Eduadie** · 12-04-2017, 00:31

Vorrei mettermi in regola col titolo ma non riesco a modificarlo...

Purtroppo fermat con i tuoi metodi non sono riuscito a risolvere...

**fermat** · 12-04-2017, 09:24

Originariamente inviata da Eduadie

Vorrei mettermi in regola col titolo ma non riesco a modificarlo...

Purtroppo fermat con i tuoi metodi non sono riuscito a risolvere...

ok ma facci vedere i tuoi tentativi.
magari hai fatto un errore banale.
così è difficile aiutarti...

**Eduadie** · 12-04-2017, 12:32

Si lo avrei fatto oggi, hai ragione.

Sono arrivato a modificare lo script in questo modo e farlo funzionare su entrambi gli slideshow ma adesso sono asincroni, o meglio finisce il primo parte il secondo, finisce il secondo parte il primo.

Questo è come l'ho modificato:

codice:

/*
    Image Cross Fade Redux
    Version 1.0
    Last revision: 02.15.2006
    steve@slayeroffice.com


    Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/


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.createElement)return;


    css = d.createElement('link');
    css.setAttribute('href','slideshow.css');
    css.setAttribute('rel','stylesheet');
    css.setAttribute('type','text/css');
    d.getElementsByTagName('head')[0].appendChild(css);
    
      imgs = $(".prova");
      for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
      imgs[0].style.display = 'block';
      imgs[0].xOpacity = .99;
      
      setTimeout(so_xfade,3000);
    
    
}


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,3000);
    }
    else
    {
        setTimeout(so_xfade,50);
    }


    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) + ')';
    }
}

Modificando i div così:

codice HTML:

<div class="slideshow">    <img class="prova" src="1.jpg" />    <img class="prova" src="2.jpg" />               <img class="prova" src="3.jpg" /></div>
<div class="slideshow">    <img class="prova" src="1.jpg" />    <img class="prova" src="2.jpg" />               <img class="prova" src="3.jpg" /></div>

Su quel link puoi vedere sempre il risultato...

Discussione: Script JS

Strumenti discussione

Ricerca discussione

Visualizza

Script JS

Permessi di invio