Here is my first attempt at creating a simple slideshow. Contributions to making this more efficient are welcomed!
Slideshow
AleMonteiro commented: Nice job, very sucint! +8
LastMitch commented: Thanks for sharing! +11
<!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>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.