bpops Posted May 15, 2009 Share Posted May 15, 2009 I am interested in making a website that has a 'slideshow' akin to what you see on the main pages at http://www.gamespot.com or http://www.gog.com Essentially, it's a large div with ~5 different images that cycle. The user may also select which image to see by pressing small buttons at the bottom, or click the image to be directed to a particular page. I'm not even sure what this is called, let alone know where to find a tutorial. If anyone can direct me to a tutorial, or a free-to-use script that does this, thanks in advance! Link to comment https://forums.phpfreaks.com/topic/158295-need-a-tutorial-for-a-javascript-slideshow/ Share on other sites More sharing options...
bpops Posted May 15, 2009 Author Share Posted May 15, 2009 Found another site that has one, though I think this one might be flash: https://shop.digg.com/ Link to comment https://forums.phpfreaks.com/topic/158295-need-a-tutorial-for-a-javascript-slideshow/#findComment-834932 Share on other sites More sharing options...
sKunKbad Posted May 16, 2009 Share Posted May 16, 2009 slideshow.html <html> <head> <title>slide&fade</title> <script type="text/javascript" src="slide.js"></script> </head> <body bgcolor=#eeeeee> </body> </html> slide.js /*************************************************************************************** Copyright (C) 2008 Andreas Berger This script is made by and copyrighted to Andreas Berger - [email protected] It may be used for free as long as this msg is intact! **************************************************************************************** Version 20080502 ***************************************************************************************/ //*****parameters to set***** //into this array insert the paths of your pics. //if there are only 2 images, set them two times i.e. 1/2/1/2 imges=new Array ('pic01.jpg', 'pic02.jpg', 'pic03.jpg', 'pic04.jpg', 'pic05.jpg'); picleft=0; //set this to the left position of your pics to be shown on the page pictop=0; //set thid to the top position of your pics to be shown on the page picwid=551; //set this to the width of your widest pic pichei=354; //... and this to the height of your highest pic backgr="#ffffff"; //set this to the background color you want to use for the slide-area //(for example the body-background-color) if your pics are of different size sdur=4; //time to show a pic between fades in seconds fdur=1; //duration of the complete fade in seconds steps=20; //steps to fade from on pic to the next startwhen=1; // "startwhen" leave it at "null" to start the function by calling it from your page by link //(sample: <a href="javascript:myfade();">slide</a>) // or set it to 1 to start the slide automatically as soon as the page is loaded //*****nothing more to do, have fun //************************************************************************************** ftim=fdur*1000/steps;stim=sdur*1000;emax=imges.length; for(e = 1; e <= emax; e++) { theid="img"+e;thesrc=imges[e-1]; document.write("<div id='"+theid+"'><img src='"+thesrc+"' border='0'></img></div>"); } document.write("<style type='text/css'>"); for(b = 1; b <= emax; b++) { thestylid="img"+b;thez=1;thevis='hidden'; if(b<=1) {thez=2; thevis='visible';} document.write("#"+thestylid+" {position:absolute; left:"+picleft+"px; top:"+pictop+"px; width:"+picwid+"px; height:"+pichei+"px; background-color:"+backgr+"; layer-background-color:"+backgr+"; visibility:"+thevis+"; z-index:"+thez+";}"); } document.write("</style>"); function myfade() { parr = new Array(); for(a = 1; a <= emax; a++) { idakt="img"+a;paktidakt=document.getElementById(idakt); ie5exep=new Array(paktidakt);parr=parr.concat(ie5exep);} i=1;u=0;slide (i); } function slide(numa){ ptofade = parr[numa-1]; if(numa<=emax){pnext=parr[numa];} if(numa==emax){pnext=parr[0];} pnext.style.visibility = "visible"; pnext.style.filter = "Alpha(Opacity=100)"; pnext.style.MozOpacity = 1; pnext.style.opacity = 1; ptofade.style.filter = "Alpha(Opacity=100)"; ptofade.style.MozOpacity = 1; ptofade.style.opacity = 1; factor = 100/steps; slidenow(); } function slidenow(){ check1=ptofade.style.MozOpacity; maxalpha = (100 - factor*u)/100*105; if(check1<=maxalpha/100){u=u+1;} curralpha = 100 - factor*u; ptofade.style.filter = "Alpha(Opacity="+curralpha+")"; ptofade.style.MozOpacity = curralpha/100; ptofade.style.opacity = curralpha/100; if(u<steps){window.setTimeout("slidenow()",ftim);} if(u>=steps && i<emax){ ptofade.style.visibility = "hidden"; ptofade.style.zIndex = 1; pnext.style.zIndex = 2; i=i+1;u=0; window.setTimeout("slide(i)",stim);} if(u>=steps && i>=emax){ ptofade.style.visibility = "hidden"; ptofade.style.zIndex = 1; pnext.style.zIndex = 2; i=1;u=0; window.setTimeout("slide(i)",stim);} } function dostart(){window.setTimeout("myfade()",stim);} if(startwhen){onload=dostart;} Link to comment https://forums.phpfreaks.com/topic/158295-need-a-tutorial-for-a-javascript-slideshow/#findComment-835374 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.