|
|||||||
|
|
|
 |
|
|
Strumenti |
13-08-2010, 11:34
|
#1 |
|
Member
Iscritto dal: Nov 2004
Città: Erice
Messaggi: 61
|
[Javascript] scorrimento immagini verticale
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, 09:50
|
#2 |
|
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. |
|
|
|
17-08-2010, 09:27
|
#3 |
|
Member
Iscritto dal: Nov 2004
Città: Erice
Messaggi: 61
|
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>
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 00:30.
