Långsammare bildbläddring?

[kungmats]

Hej!

 

Jag har ett script som växlar bilder.

Jag skulle vilja att bildeväxlingen skedde lite långsammare. Alltså inte visningen av varje bild. Den vet jag hur jag ändrar, utan själva växlingen ... går det?

 

<script language="JavaScript1.2"> 
//Fade-in image slideshow- By Dynamic Drive 
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com 
//This credit MUST stay intact for use 

var slideshow_width='480px' //SET IMAGE WIDTH 
var slideshow_height='360px' //SET IMAGE HEIGHT 
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) 

var fadeimages=new Array() 
//SET IMAGE PATHS. Extend or contract array as needed 

<? 

$data = mysql_query("SELECT * FROM imagesshop"); 
$i=0;
while ($r = mysql_fetch_array ($data)) 
{ 
  print "fadeimages[".$i."]='bildspel/".$r["filename"]."';";
  $i++;
}
?>

var preloadedimages=new Array() 
for (p=0;p<fadeimages.length;p++){ 
preloadedimages[p]=new Image() 
preloadedimages[p].src=fadeimages[p] 
} 

var ie4=document.all 
var dom=document.getElementById 

if (ie4||dom) 
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') 
else 
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">') 

var curpos=10 
var degree=10 
var curcanvas="canvas0" 
var curimageindex=0 
var nextimageindex=1 


function fadepic(){ 
if (curpos<100){ 
curpos+=10 
if (tempobj.filters) 
tempobj.filters.alpha.opacity=curpos 
else if (tempobj.style.MozOpacity) 
tempobj.style.MozOpacity=curpos/100 
} 
else{ 
clearInterval(dropslide) 
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" 
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) 
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">' 
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 
setTimeout("rotateimage()",pause) 
} 
} 

function rotateimage(){ 
if (ie4||dom){ 
resetit(curcanvas) 
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) 
crossobj.style.zIndex++ 
var temp='setInterval("fadepic()",50)' 
dropslide=eval(temp) 
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" 
} 
else 
document.images.defaultslide.src=fadeimages[curimageindex] 
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 
} 

function resetit(what){ 
curpos=10 
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) 
if (crossobj.filters) 
crossobj.filters.alpha.opacity=curpos 
else if (crossobj.style.MozOpacity) 
crossobj.style.MozOpacity=curpos/100 
} 

function startit(){ 
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) 
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">' 
rotateimage() 
} 

if (ie4||dom) 
window.onload=startit 
else 
setInterval("rotateimage()",pause) 

</script>

 

[inlägget ändrat 2009-02-23 12:21:18 av kungmats]

[Anjuna Moon]

Ändra värdet 50 i följande rad till ett högre värde:

var temp='setInterval("fadepic()",50)'

Värdet är tiden i millisekunder mellan varje steg i bildväxlingsfade:n. Börja testa med successiva ökningar med 50 i taget och förfina ändringen av värdet när du börjar komma i närheten av det som verkar bra.

 

[kungmats]

Stort tack!

 

Precis vad jag var ute efter = POÄNG!!!

Jag har läst dom där raderna men tolkat det som det bara rörde någon fix för IE4.

 

Finns det fler användbara variabler i scriptet som jag inte fattat?

 

[Anjuna Moon]

Finns det fler användbara variabler i scriptet som jag inte fattat?

Well, eftersom du ville ha en långsammare fade så kan du utnyttja det faktum att i varje fade-steg så ändras opaciteten just nu med 10%. Så istället för att ställa upp värdet på setInterval, så kan du minska värdet 10 till ex. 5 eller 2 på följande rad:

curpos+=10 

Ändrar du till ex. 5 så kommer faden bli hälften så snabb (precis som att dubbla värdet i setInterval) men toningen kommer bli mjukare istället.

 

Sedan har du i början av scriptet värdet för tiden mellan varje bildbyte (var pause=4000) som du kan förändra.

 

Övrigt rör mest storleken på slideshowen

 

[kungmats]

TACK!!

 

Såg också att jag var tvungen att ändra

curpos=10 till lägre värde för annars kom nästa bild blixtrande snabbt