The following is a simple script used to make slideshow of images
through JavaScript/JQuery. Through this, the overhead of flash can be easily
removed.
Download: Source Code
Download: Source Code
<html>
<head>
<!-- 'jquery-1.7.2.js' can be
downloaded from Internet. Contains basic Javascript Libraries -->
<script
language="javascript"
src="jquery-1.7.2.js"></script>
<!-- Slideshow javascript code
starts -->
<script
type="text/javascript">
// An array of images
var imgs =
["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];
// cnt contains the total number of
images.
var cnt =
imgs.length;
//function runs on page load. It
runs Slider() function in every 3 seconds
$(function() {
setInterval(Slider, 3000);
});
//Slider() function fades out the previous image slowly and fades in the
next image.
function Slider() {
//The src attribute of <img>
with id "imageSlide" changes to the next image name with fading
effect.
$('#imageSlide').fadeOut("slow",
function() {
$(this).attr('src', imgs[(imgs.length++) %
cnt]).fadeIn("slow");
});
}
</script>
<title>
Untitled </title>
</head>
<body>
<!-- It contains the image with
image5.jpg as the initial Image. -->
<img
id="imageSlide" alt="" src="image5.jpg" />
</body>
</html>
No comments:
Post a Comment