JorgeM 5 Tallied Votes 249 Views Share

Here is my first attempt at creating a simple slideshow. Contributions to making this more efficient are welcomed!

jsFiddle --> Demo
AleMonteiro commented: Nice job, very sucint! +8
LastMitch commented: Thanks for sharing! +11
<!DOCTYPE html>
 <title>Slideshow Demo</title>
   #container {position:relative;margin:25px;}
   img {position:absolute;top:0;left:0;border:1px solid #7f7f7f;}
   #img1 {z-index:999}
 <script src=""></script>

<div id="container">
 <img id="img0" />
 <img id="img1" />

var image1 = '';
var image2 = '';
var image3 = '';

var imgArray = new Array(image1,image2,image3);
var imgCount = 0;
var e = 0;
var fadeSpeed = 2000;

function slideShow() {
	if(e == 2) {e = 0;}
	if(imgCount == imgArray.length) {imgCount = 0;}
	document.getElementById('img'+e).src = imgArray[imgCount];
	setTimeout("slideShow()", 5000);

AleMonteiro 238 Can I pick my title?

Hi JorgeM, nice job, very small code.

I took the liberty to change a few things, hope you don't mind.

This is a version with just a small code ajustment:

And this is a version with a closed scope, so it could be easy of use, without worring about variable names being used in another part of the page:

commented: you are a master of JavaScript +12
commented: :) +0
JorgeM 966 Problem Solver Team Colleague Featured Poster

Thank you for your contributions! Definately a great job on your updated verions, especicallythe second version...I have quite a bit to learn to get to that level of JavaScript mastery.

would be interesting to see if anyone else can modify either version to further reduce/simplify the script..

After this thread becomes stale, we'll vote on the final version so that others can benefit from this simple slideshow. Sometimes, you just need a simple solution!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.