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! Quote Link to comment 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/ Quote Link to comment 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 - andreas_berger@bretteleben.de 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;} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.