[Javascript] scorrimento immagini verticale

Giupin · 13-08-2010, 10:34

Salve,
ho modificato uno script per lo scorrimento di immagini in verticale in modo che mi faccia scorrere 4 foto alla volta.. ma dopo poco le immagini cominciano ad accavallarsi.. potreste aiutarmi a trovare l'errore nel meccanismo di funzionamento?

ecco il codice

Codice:

<html>
<head>
    <title>scroller verticale</title>
    
    <script type="text/javascript">
    //configure the below four variables to change the style of the slider//
    //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow
    var scrollerwidth=120;
    var scrollerheight=100;
    var scrollerbgcolor='';
    //3000 miliseconds=3 seconds
    var pausebetweenimages=3000;

    //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
    var slideimages=new Array();
    slideimages[0]='<a href="#"><img src="1.jpg" border=0"></a><p style="margin: 0px;">Immagine 1</p>';
    slideimages[1]='<a href="#"><img src="3.jpg" border=0"></a><p style="margin: 0px;">Immagine 3</p>';
    slideimages[2]='<a href="#"><img src="4.jpg" border=0"></a><p style="margin: 0px;">Immagine 4</p>';
    slideimages[3]='<a href="#"><img src="5.jpg" border=0"></a><p style="margin: 0px;">Immagine 5</p>';
    slideimages[4]='<a href="#"><img src="6.jpg" border=0"></a><p style="margin: 0px;">Immagine 6</p>';
    //extend this list     

    if (slideimages.length>1)
        i=2;
    else
        i=0;

    function move_div1(whichdiv){
        tdiv=eval(whichdiv);
        if (tdiv.style.pixelTop >0 && tdiv.style.pixelTop <=5){
            tdiv.style.pixelTop=0;
            setTimeout("move_div1(tdiv)",pausebetweenimages);
            setTimeout("move_div2(second)",pausebetweenimages);
            return;
        }
        if (tdiv.style.pixelTop >= (tdiv.offsetHeight*-1)-100){
            tdiv.style.pixelTop-=5;
            setTimeout("move_div1(tdiv)",100);
        }
        else{
            tdiv.style.pixelTop=scrollerheight;
            tdiv.innerHTML=slideimages[i];
            if (i==slideimages.length-1)
                i=0;
            else
                i++;
        }
    }

    function move_div2(whichdiv){
        tdiv2=eval(whichdiv);
        if (tdiv2.style.pixelTop >0 && tdiv2.style.pixelTop <=5){
            tdiv2.style.pixelTop=0;
            setTimeout("move_div2(tdiv2)",pausebetweenimages);
            setTimeout("move_div1(first)",pausebetweenimages);
            return;
        }
        if (tdiv2.style.pixelTop >= (tdiv2.offsetHeight*-1)-200){
            tdiv2.style.pixelTop-=5;
            setTimeout("move_div2(second)",100);
        }
        else{
            tdiv2.style.pixelTop=scrollerheight;
            tdiv2.innerHTML=slideimages[i];
            if (i==slideimages.length-1)
                i=0;
            else
                i++;
        }
    }
    
    function move_div3(whichdiv){
        tdiv3=eval(whichdiv);
        if (tdiv3.style.pixelTop >0 && tdiv3.style.pixelTop <=5){
            tdiv3.style.pixelTop=0;
            setTimeout("move_div3(tdiv3)",pausebetweenimages);
            setTimeout("move_div4(fourth)",pausebetweenimages);
            return;
        }
        if (tdiv3.style.pixelTop >= tdiv3.offsetHeight*-1){
            tdiv3.style.pixelTop-=5;
            setTimeout("move_div3(tdiv3)",100);
        }
        else{
            tdiv3.style.pixelTop=scrollerheight+100;
            tdiv3.innerHTML=slideimages[i];
            if (i==slideimages.length-1)
                i=0;
            else
                i++;
        }
    }
    
    function move_div4(whichdiv){
        tdiv4=eval(whichdiv);
        if (tdiv4.style.pixelTop >0 && tdiv4.style.pixelTop <=5){
            tdiv4.style.pixelTop=0;
            setTimeout("move_div4(tdiv4)",pausebetweenimages);
            setTimeout("move_div3(third)",pausebetweenimages);
            return;
        }
        if (tdiv4.style.pixelTop >= tdiv4.offsetHeight*-1){
            tdiv4.style.pixelTop-=5;
            setTimeout("move_div4(fourth)",100);
        }
        else{
            tdiv4.style.pixelTop=scrollerheight+200;
            tdiv4.innerHTML=slideimages[i];
            if (i==slideimages.length-1)
                i=0;
            else
                i++;
        }
    }
    
    function startscroll(){        
        move_div1(first);
        move_div3(third);
        second.style.top=scrollerheight;        
        third.style.top=scrollerheight+100;                
        fourth.style.top=scrollerheight+200;                        
    }

    window.onload = startscroll;

</script>
</head>

<body>
    <p style="text-align: center; font-family: Verdana; font-size: small;">
        <b>Immagini in sequenza verticale<br /><br /></b>
        ad ogni immagine è possibile associare un link<br />
    </p>

    
    <div id="main" style="position:relative;width:120px;height:600px;overflow:hidden;background-color: white;">
        <div style="position:absolute;width:120px;height:600px;clip:rect(0 120 600 0);left:0;top:0;">
            <div id="first" style="position:absolute;width:120px;left:0;top:1;">
                <script type="text/javascript">
                    document.write(slideimages[0]);
                </script>
            </div>
            <div id="second" style="position:absolute;width:120px;left:0;top:0;">
                <script type="text/javascript">
                    document.write(slideimages[1]);
                </script>
            </div>
            <div id="third" style="position:absolute;width:120px;left:0;top:1;">
                <script type="text/javascript">
                    document.write(slideimages[0]);
                </script>
            </div>
            <div id="fourth" style="position:absolute;width:120px;left:0;top:0;">
                <script type="text/javascript">
                    document.write(slideimages[1]);
                </script>
            </div>
         </div>
     </div>
</body>
</html>

14-08-2010, 08:50

Uhm, di debuggare quel codice non ne ho mica molta voglia

anche perchè un non corretto funzionamento potrebbe dipendere molto dal browser con cui esegui quel codice.

Nel caso non ne fossi a conoscenza, il consiglio che posso darti è di dare uno sguardo alla sterminata libreria di plug-in di JQuery.

Facile che tu possa trovare un componente simile o identico al tuo e, quasi sicuramente, stabile su ogni piattaforma.

Ciao.

Giupin · 17-08-2010, 08:27

Ho provato ad utilizzare jquery come mi hai consigliato.. vorrei che appena eseguiti gli effetti sul primo gruppo di immagini proseguisse con le altre ma il setTimeout lo esegue solo la prima volta.. non capisco perchè... il delay interferisce con il timeout?
grazie

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>
    <title>scroller verticale</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
    
    <script type="text/javascript">
        var elementi=8;
        var tot_cicli=elementi/4;
        var ciclo=1;
        var tot=4;
        var j=1;
        var k=1;
        var n=1;
        var c;
        
        var timeout = setTimeout("check_visible()", 7000);
        
        function check_visible(){
            alert("check visible");
            
            if($("#"+(ciclo*4)).css("display") == "none"){
                if(ciclo == tot_cicli){
                    //clearTimeout(timeout);
                    ciclo = 1;
                    j=1;
                    tot=4;
                }
                for(j=j;j<=tot;j++){
                    $("#"+j).fadeIn(1000).delay(3000).fadeOut(3000);                                              
                    //$.dequeue($("#"+j));
                }
                j=tot+1;
                tot=j+3;
                ciclo=ciclo+1;
            }
        }
    </script>
</head>

<body>
    <p style="text-align: center; font-family: Verdana; font-size: small;">
        Immagini in sequenza verticale, ad ogni immagine è possibile associare un link<br />
    </p>    
    <div id="main" style="position:relative;width:120px;height:700px;overflow:hidden;background-color: white;">
        <div id="scroller" style="position:absolute;width:120px;height:700px;clip:rect(0 120 700 0);left:0;top:0;">
            <div id="1" style="display:none;position:absolute;width:120px;left:0;top:100;">
                <img src="1.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione 1</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="2" style="display:none;position:absolute;width:120px;left:0;top:250;">
                <img src="3.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="3" style="display:none;position:absolute;width:120px;left:0;top:400;">
                <img src="4.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="4" style="display:none;position:absolute;width:120px;left:0;top:550;">
                <img src="5.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="5" style="display:none;position:absolute;width:120px;left:0;top:100;">
                <img src="1.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="6" style="display:none;position:absolute;width:120px;left:0;top:250;">
                <img src="3.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="7" style="display:none; position:absolute;width:120px;left:0;top:400;">
                <img src="4.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
            <div id="8" style="display:none; position:absolute;width:120px;left:0;top:550;">
                <img src="5.jpg" alt="" title="" />
                <p style="margin: 0px;">Descrizione</p>
                <p style="margin: 0px;">Zona</p>
                <p style="margin: 0px;">Euro</p>
            </div>
         </div>
     </div>
</body>
</html>

14-08-2010, 08:50	#2
anonimizzato Messaggi: n/a	Uhm, di debuggare quel codice non ne ho mica molta voglia anche perchè un non corretto funzionamento potrebbe dipendere molto dal browser con cui esegui quel codice. Nel caso non ne fossi a conoscenza, il consiglio che posso darti è di dare uno sguardo alla sterminata libreria di plug-in di JQuery. Facile che tu possa trovare un componente simile o identico al tuo e, quasi sicuramente, stabile su ogni piattaforma. Ciao.

Strumenti
Mostra una versione stampabile Invia questa pagina per email