Ekki mikill jquery maður og slideshowið er mjög frumstætt, en endilega bendið mér á eða aðlagið að eigin þörfum
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Slideshow</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">
/*
Hér þarf ekkert að vera nema aray af myndum en set mySlide functionið sem er slideið sjálft hérna líka.
*/
wait = 5000; // Bið milli mynda
div = '#slideshow'; // divið þar sem þú vilt að slideshowið sé
function mySlide(id) { // customizaðu slideið
$(id).fadeIn(2000).delay(5000).fadeOut(2000);
}
var images = new Array();
images[0] = 'slideshow/4787203165_94abf027f4.jpg';
images[1] = 'slideshow/4787208321_fd34e41b0a.jpg';
images[2] = 'slideshow/4787218211_66f9a80ab5.jpg';
images[3] = 'slideshow/4787844372_42ed3e142d.jpg';
</script>
</head>
<body>
<div id="slideshow"></div>
</body>
</html>slideshow.js
var wait = 5000;
var div = '#slideshow';
function mySlide(id) {
$(id).fadeIn(2000).delay(5000).fadeOut(2000);
}
var x = 0;
function timeout() {
x++;
if (x > images.length) {
x = 1;
}
var id = 'img#slideshowImage'+(x-1);
mySlide(id);
setTimeout(timeout, wait);
}
$(document).ready(function() {
function image(id) {
return '<img id="slideshowImage'+(id)+'" class="slideshowImage" src="'+images[id]+'" alt"" />';
}
for(var id in images) {
$('#slideshow').append(image(id));
}
$('.slideshowImage').hide();
$('#slideshow').css('position','relative');
$('.slideshowImage').css('position','absolute');
timeout();
});