I would like to create a slideshow like what most wedding sites have but I would like to have some fancy transitions like "Random dissolve, checkerboard, spiral" e.t.c, how can I add any of those to my slideshow, this is a regular fade slideshow I have:

Code:
 var speed=40;       /* this is the image fade speed - higher value=slower, lower value=faster */
   var timer=4000      /* this is the time that each image is static - 4000=4 seconds */

   var pics=new Array();
       pics[0]='images/autumn.jpg';
       pics[1]='images/lace.jpg';
       pics[2]='images/lotus1.jpg';
       pics[3]='images/lotus.jpg';
       pics[4]='images/apple.jpg';
       pics[5]='images/apple4.jpg';
       pics[6]='images/girl.jpg';
       pics[7]='images/clouds.jpg';
       pics[8]='images/blood.jpg';
       pics[9]='images/buddha.jpg';

/****************** these links are optional and can be removed if not required ******************/

   var links=new Array();
       links[0]='http://www.google.com/';
       links[1]='http://www.guardian.co.uk/crossword/';
       links[2]='http://www.htmlforums.com/';
       links[3]='http://www.w3schools.com/';
       links[4]='http://www.alistapart.com/';
       links[5]='http://news.bbc.co.uk/';
       links[6]='http://validator.w3.org/';
       links[7]='http://en.wikipedia.org/';
       links[8]='http://tools.dynamicdrive.com/gradient/';
       links[9]='http://www.hoogerbrugge.com/';

/*************************************************************************************************/

   var topop=100;
   var botop=0;
   var topnum=0;
   var botnum=1;
   var test=0;

function init() { 

  objt=document.getElementById('top');

if(document.getElementById('link')) {
  objl=document.getElementById('link'); 
 }
else {
  objl=document.getElementById('container');
 }

  bimg=document.createElement('img');
  bimg.setAttribute('id','bot');
  bimg.setAttribute('src',pics[1]);

  objl.appendChild(bimg);

  objb=document.getElementById('bot');
          
  fader=setTimeout(function(){fadeout()},timer);
 }

function fadeout() {

if(document.getElementById('link')) {
   objl.href='#';                       
   objl.style.cursor='default';  
 }


   test==0?(topop--,botop++):(topop++,botop--);

if(objt.filters) {
   objt.style.filter='alpha(opacity='+topop+')';
   objb.style.filter='alpha(opacity='+botop+')';

 }
else {
   objt.style.opacity=topop/100;
   objb.style.opacity=botop/100;
 }
if(topop==0){
   test=1;
   topnum+=2;
if(topnum==pics.length+1) {
   topnum=1;
 }  
if(topnum==pics.length){
   topnum=0;
 }
   objt.src=pics[topnum];
   clearTimeout(fader);
   return stop();
 }
if(topop==100){
   test=0;
   botnum+=2;

if(botnum==pics.length) {
   botnum=0;
 } 
if(botnum==pics.length+1){
   botnum=1; 
 }
   objb.src=pics[botnum];
   clearTimeout(fader);
   return stop();
 }
   setTimeout(function(){fadeout()},speed);
 }

function stop(){
if(document.getElementById('link')) {
   objl.style.cursor='pointer'; 
 }

if(test==0){
   objl.href=links[topnum];
   topop=100;
   botop=0;
 }
if(test==1){
if(document.getElementById('link')) {
   objl.href=links[botnum];
 }

   topop=1;
   botop=99;
 }
   setTimeout(function(){fadeout()},timer);
 }

if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }