JavaScript Picture Slider
Hello,
I was coding this little Picture Slider in JavaScript for a colleague and thought: Why not just share it with everybody else?
So here it is people… It is not advanced, it is not high-tech… but it is simple!
-
<html>
-
-
<head>
-
<title>Picture Slider</title>
-
-
<script type="text/javascript">
-
// Setup
-
var imagePath = "images/"; // Path to image-folder
-
var images = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"); // filenames of the images
-
var slideInterval = 1.5; // amount of seconds before sliding to the next image.
-
-
// Variabels
-
var curImage = 0;
-
-
// Fucntions
-
function startSlide() {
-
setTimeout("nextSlide()", slideInterval * 1000);
-
}
-
-
function nextSlide() {
-
var viewer = document.getElementById("imageViewer");
-
curImage = curImage + 1;
-
-
if (images[curImage] == null)
-
curImage = 0;
-
-
viewer.src = imagePath + images[curImage];
-
-
setTimeout("nextSlide()", slideInterval * 1000);
-
}
-
-
// Start the slider
-
startSlide();
-
</script>
-
</head>
-
-
<body>
-
-
<h1>Picture Slider</h1>
-
<br />
-
<img id="imageViewer" src="images/image1.jpg">
-
-
</body>
-
-
</html>
Just change the variables under the “setup” in the start of the JavaScript-code and change the src-parameter on the img-tag of the picture to show the first picture. Then the script will work.
Have fun !!
/KEF