-
<!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>