1,105,384 Community Members

Slideshow

Member Avatar
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
 
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.

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
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/

Member Avatar
JorgeM
IT Addict
6,414 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
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!

You
Post:
Start New Discussion
Tags Related to this Article