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(); });