Voeg zoveel images als je wilt toe in de ul van de <div> "main-show". In de <ul> met het id "slideshow_positie" benoem je net zoveel items met "slideshow.pos" als dat er afbeeldingen zijn (let op! de nummering begint met 0 - NUL). Hierna hoef je alleen nog maar de stylesheet van de slideshow in de head-sectie te plaatsen, en het javascript van de slideshow (zo laag als mogelijk) in de body-sectie. Al laatste heb ik nog de slideshow.png (met de knopjes) voor jou achter de link "zitten".
<style type="text/css">
#slideshow_{
position:relative;
height:235px}
.slideshow_knop{float:left;
width:25px;
height:235px;cursor:pointer}
#slideshow_knop_links{
background:url(slideshow.png) -50px -265px no-repeat}
#slideshow_knop_links:hover{
background-position:-0 -265px}
#slideshow_knop_rechts{
background:url(slideshow.png) 0 90px no-repeat}
#slideshow_knop_rechts:hover{
background-position:-50px 90px}
#main_show{
float:left;
position:relative;
overflow:auto;
width:518px;
height:235px}
#main_show ul{
position:absolute;
margin-left:-40px;
list-style:none;
top:0;
left:0}
#main_show li{
float:left;
width:558px;
height:235px}
.slideshow_positie{
position:relative;
top:0px;
list-style:none;
height:25px}
.slideshow_positie li{
float:left;
cursor:pointer;
height:8px;
width:8px;
background:transparent;
margin:0 4px 0 0;
border:1px solid #000}
.slideshow_positie li:hover,li.current{
background:#808080}
</style>
<script>
var _slideshow = {};
function show_$(i) {
return document.getElementById(i);
}
function show_$$(e, p) {
return p.getElementsByTagName(e);
}
_slideshow.main_show = function() {
function slide(n, p) {
this.n = n;
this.init(p);
}
slide.prototype.init = function(p) {
var s = this.x = show_$(p.id),
u = this.u = show_$$('ul', s)[0],
c = this.m = show_$$('li', u),
l = c.length,
i = this.l = this.c = 0;
this.b = 1;
if (p.het_id && p.welke_actief) {
this.g = show_$$('li', show_$(p.het_id));
this.s = p.welke_actief;
}
this.a = p.seconden || 0;
this.p = p.resume || 0;
this.r = p.rewind || 0;
this.e = p.elastic || false;
this.v = p.vertical || 0;
s.style.overflow = 'hidden';
for (i; i < l; i++) {
if (c[i].parentNode == u) {
this.l++;
}
}
if (this.v) {
u.style.top = 0;
this.h = p.height || c[0].offsetHeight;
u.style.height = (this.l * this.h) + 'px';
} else {
u.style.left = 0;
this.w = p.width || c[0].offsetWidth;
u.style.width = (this.l * this.w) + 'px';
}
this.nav(p.positie || 0);
if (p.positie) {
this.pos(p.positie || 0, this.a ? 1: 0, 1);
} else if (this.a) {
this.seconden();
}
if (p.left) {
this.sel(p.left);
}
if (p.right) {
this.sel(p.right);
}
};
slide.prototype.seconden = function() {
this.x.ai = setInterval(new Function(this.n + '.move(1,1,1)'), this.a * 1000);
};
slide.prototype.move = function(d, a) {
var n = this.c + d;
if (this.r) {
n = d == 1 ? n == this.l ? 0: n: n < 0 ? this.l - 1: n;
}
this.pos(n, a, 1);
};
slide.prototype.pos = function(p, a, m) {
var v = p;
clearInterval(this.x.ai);
clearInterval(this.x.si);
if (!this.r) {
if (m) {
if (p == -1 || (p !== 0 && Math.abs(p) % this.l === 0)) {
this.b++;
for (var i = 0; i < this.l; i++) {
this.u.appendChild(this.m[i].cloneNode(1))
}
this.v ? this.u.style.height = (this.l * this.h * this.b) + 'px': this.u.style.width = (this.l * this.w * this.b) + 'px';
}
if (p == -1 || (p < 0 && Math.abs(p) % this.l == 0)) {
this.v ? this.u.style.top = (this.l * this.h * -1) + 'px': this.u.style.left = (this.l * this.w * -1) + 'px';
v = this.l - 1
}
} else if (this.c > this.l && this.b > 1) {
v = (this.l * (this.b - 1)) + p;
p = v
}
}
var t = this.v ? v * this.h * -1: v * this.w * -1,
d = p < this.c ? -1: 1;
this.c = v;
var n = this.c % this.l;
this.nav(n);
if (this.e) {
t = t - (8 * d)
}
this.x.si = setInterval(new Function(this.n + '.slide(' + t + ',' + d + ',1,' + a + ')'), 10)
},
slide.prototype.nav = function(n) {
if (this.g) {
for (var i = 0; i < this.l; i++) {
this.g[i].className = i == n ? this.s: ''
}
}
},
slide.prototype.slide = function(t, d, i, a) {
var o = this.v ? parseInt(this.u.style.top) : parseInt(this.u.style.left);
if (o == t) {
clearInterval(this.x.si);
if (this.e && i < 3) {
this.x.si = setInterval(new Function(this.n + '.slide(' + (i == 1 ? t + (12 * d) : t + (4 * d)) + ',' + (i == 1 ? ( - 1 * d) : ( - 1 * d)) + ',' + (i == 1 ? 2: 3) + ',' + a + ')'), 10)
} else {
if (a || (this.a && this.p)) {
this.seconden()
}
if (this.b > 1 && this.c % this.l == 0) {
this.clear()
}
}
} else {
var v = o - Math.ceil(Math.abs(t - o) * .1) * d + 'px';
this.v ? this.u.style.top = v: this.u.style.left = v
}
},
slide.prototype.clear = function() {
var c = show_$$('li', this.u),
t = i = c.length;
this.v ? this.u.style.top = 0: this.u.style.left = 0;
this.b = 1;
this.c = 0;
for (i; i > 0; i--) {
var e = c[i - 1];
if (t > this.l && e.parentNode == this.u) {
this.u.removeChild(e);
t--
}
}
},
slide.prototype.sel = function(i) {
var e = show_$(i);
e.onselectstart = e.onmousedown = function() {
return false
}
}
return {
slide: slide
}
} ();
var slideshow=new _slideshow.main_show.slide('slideshow',{
id:'main_show',
seconden:3,
resume:false,
vertical:false,
het_id:'slideshow_positie',
welke_actief:'current',
positie:0,
rewind:false,
elastic:true,
left:'slideshow_knop_links',
right:'slideshow_knop_rechts'
});
</script>
<div id="slideshow_">
<div class="slideshow_knop" id="slideshow_knop_links" onclick="slideshow.move(-1)"></div>
<div id="main_show">
<ul>
<li><img src="slideshow-1.jpg" width="558" height="235" alt="slideshow afbeelding 1" /></li>
<li><img src="slideshow-2.jpg" width="558" height="235" alt="slideshow afbeelding 2" /></li>
<li><img src="slideshow-3.jpg" width="558" height="235" alt="slideshow afbeelding 3" /></li>
<li><img src="slideshow-4.jpg" width="558" height="235" alt="slideshow afbeelding 4" /></li>
<li><img src="slideshow-5.jpg" width="558" height="235" alt="slideshow afbeelding 5" /></li>
<li><img src="slideshow-6.jpg" width="558" height="235" alt="slideshow afbeelding 6" /></li>
<li><img src="slideshow-7.jpg" width="558" height="235" alt="slideshow afbeelding 7" /></li>
<li><img src="slideshow-8.jpg" width="558" height="235" alt="slideshow afbeelding 8" /></li>
</ul>
</div>
<div class="slideshow_knop" id="slideshow_knop_rechts" onclick="slideshow.move(1)"></div>
<ul id="slideshow_positie" class="slideshow_positie">
<li onclick="slideshow.pos(0)"></li>
<li onclick="slideshow.pos(1)"></li>
<li onclick="slideshow.pos(2)"></li>
<li onclick="slideshow.pos(3)"></li>
<li onclick="slideshow.pos(4)"></li>
<li onclick="slideshow.pos(5)"></li>
<li onclick="slideshow.pos(6)"></li>
<li onclick="slideshow.pos(7)"></li>
</ul>
</div>