<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Slideshow Demo ::JoomlaTuts.net</title>
<style>
ul{ display: none;}
</style>
<script>
var $ =function(id){
return document.getElementById(id);
}
window.onload =function(){
var linkListNode = $("imageList");
var captionNode = $("caption");
var imageNode = $("image");
var imageList = linkListNode.getElementsByTagName("a");
var i, image, linkNode;
var imageArray =[];
for(i =0; i < imageList.length; i++){
linkNode = imageList[i];
image =new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
imageArray.push(image);
}
var counter =0;
var timer = setInterval(function(){
counter =(counter +1)% imageArray.length;
image = imageArray[counter];
captionNode.firstChild.nodeValue = image.title;
imageNode.src = image.src;
},2000);
}
</script>
</head>
<body>
<h1>Javascript Slideshow Demo</h1>
<section>
<ul id="imageList">
<li><a href="images/1.jpg" title="Nokia Mobile"></a></li>
<li><a href="images/2.jpg" title="LG Mobile"></a></li>
<li><a href="images/3.jpg" title="Blackberry Mobile"></a></li>
<li><a href="images/4.jpg" title="Samsung Mobile"></a></li>
</ul>
<h2 id="caption">Nokia Mobile</h2>
<img src="images/1.jpg" id="image">
</section>
</body>
</html>
