How to get the slideshow effect using javascript on my website?

[Wesley King]

I am trying to get a "slideshow" effect on my website. I have plenty of examples of it, but I cannot for the life of me find a tutorial on programming it.

Examples would include:

http://www.sibfox.com/

http://www.crunchyroll.com/

Both of these sites have a slideshow that has the little markers on the bottom right.

Ideally I want one like www.crunchyroll.com has.

I THINK the coding is as follows (from Sibfox.com):

        <div id="gal">
 
<div id="pics_list"><div><ul><li><img src="/data/catalog/9_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/10_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/11_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/12_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/13_thumb.jpg" width="758" height="342" /></li></ul></div></div><div id="pics_menu"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>
 
</div>
 
</div>
 
 

While the Javascript coding is as follows:

var galbuts;
var active;
var cur_cycle;
var cycle_timeout;
var pics_list;
 
function isInt(x) { 
   var y=parseInt(x); 
   if (isNaN(y)) return false; 
   return x==y && x.toString()==y.toString(); 
} 
 
function findA(aLink) {
    for (var i=0; i<galbuts.length; i++) {
        if (aLink == galbuts[i]) {
            return i;
        }
    }
}
 
function gotoPic(index) {
    if (active == index) return;
    if (isInt(active)) {
        goWhite(galbuts[active]);
    }
    active = index;
    pics_list.morph({'marginLeft': index*-1*758});
    goRed(galbuts[index]);
}
 
function toMine() {
    var a_index = findA(this);
    gotoPic(a_index);
    clearTimeout(cycle_timeout);
    cycle_timeout = setTimeout(cycle, 7500);
    cur_cycle = a_index;
    return false;
}
 
function cycle() {
    if (cur_cycle == galbuts.length-1) {
        cur_cycle = 0;
    } else {
        cur_cycle++;
    }
    gotoPic(cur_cycle);
    cycle_timeout = setTimeout(cycle, 5000);
}
 
function goRed(el) {
    el.setStyle('backgroundPosition', '0 -16px');
}
 
function goWhite(el) {
    el.setStyle('backgroundPosition', '0 -0');
}
 
 
window.addEvent('domready', function()
{
        $('keyword').addEvents({                                     
                                   'focus' : function(){  if (this.value=='search...') this.value='' },
                                    'blur' : function() { if (this.value=='') this.value='search...' }
 
                                 });
 
    galbuts = $('pics_menu').getElements('a').reverse();    
    pics_list = $('pics_list').getElement('div');
    pics_list.set('morph', {duration: 750, transition: Fx.Transitions.Quad.easeInOut});    
    goRed(galbuts[0]);
    cur_cycle = 0;
    active = 0;
    cycle_timeout = setTimeout(cycle, 5000);
    for (var i=0; i<galbuts.length; i++) {
        galbuts[i].set('morph', {duration: 350});
        galbuts[i].addEvents({
                                     'mouseleave': function(){
                                                            if (findA(this) != active) {
                                                                goWhite(this);
                                                            }
                                                       },
                                     'mouseover' : function(){
                                                             if (findA(this) != active) {
                                                                goRed(this);
                                                            }
                                                       },
                                     'click'     : toMine
                                     });
    }
    $$(document.links).filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    }).slimbox({/* Put custom options here */}, null, function(el) {
        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
}
);
 
 

Please let me know how I could customize this (including how to change size of window, how to alter the shape of the tracker in bottom right, and how to add a text box over the picture like Crunchyroll's site has. Preferably, I would like a website with the details but I can't find anything specific on this item at w3.

Thank you in advance,
Wesley

[Paul Johnson]

There is a really good example of how to do this in Chapter 4 of "jQuery Novice to Ninja". The source is available from http://www.sitepoint.com/books/jquery1/code.php - it's really rather simple!