1.11M Members

Slideshow

 
5
 

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

jsFiddle --> Demo

<!DOCTYPE html>
<html>
<head>
 <title>Slideshow Demo</title>
 <style>
   #container {position:relative;margin:25px;}
   img {position:absolute;top:0;left:0;border:1px solid #7f7f7f;}
   #img1 {z-index:999}
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

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

<script>
var image1 = 'https://lh4.googleusercontent.com/-JEFd9Bn2cqs/UT9-DaM_wpI/AAAAAAAAA4w/GZ3jVIEpUQ8/s800/image1.jpg';
var image2 = 'https://lh5.googleusercontent.com/-dXG0cK9UdSs/UT9-DaogYgI/AAAAAAAAA4w/8WD2xminsoM/s800/image2.jpg';
var image3 = 'https://lh4.googleusercontent.com/-If4lCQE7lAs/UT9-DTeH4YI/AAAAAAAAA4w/a1Z3fXMlQBA/s800/image3.jpg';

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;}
	$("#img"+e).fadeIn(fadeSpeed);
	document.getElementById('img'+e).src = imgArray[imgCount];
	imgCount++;
        e++;
	$("#img"+e).fadeOut(fadeSpeed);
	setTimeout("slideShow()", 5000);
}
slideShow();
</script>

</body>
</html>
Member Avatar
JorgeM

I enjoy being challanged on a daily basis. I love all aspects of business and technology.

 
3
 

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: http://jsfiddle.net/grFQp/5/

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: http://jsfiddle.net/Q4ang/4/

 
0
 

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!

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

You
This is an OP Kudos discussion and contributors may be rewarded
Post:
Start New Discussion
Tags Related to this Article