Created an image slidder in java web using java script
+bithesh soubhagyaThis is a small example in javascript that helps you images in specific intervals as like jquery slidder. The code is simple to understand.
The html page (copy paste this code and save as .html file)
place the images in images folder(rename the image files either in your code or the images you are placing)
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Image slidder using javascript </title>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var images = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg',
];
for(var i=0;i<=3;i++)
{
var myVar=setInterval(function(){myTimer()},1000);
}
var j=0;
function myTimer()
{
document.getElementById("mahashi").innerHTML ="";
//adding image to div using javascript
var elem = document.createElement("img"); // create a elem variable for tag <img>
elem.setAttribute("src", images[j]); // setting img attribute to elem variable
elem.setAttribute("alt", "Flower"+j);
document.getElementById("slider").appendChild(elem);
$("img").fadeIn(); // animation for img tag
j = j+1;
if(j>5){
j=0;
}
}
</script>
</head>
<body>
<h1> HTML java script example for image slidding </h1>
<div id="mahashi">
</div>
</body>
</html>
You can download the latest version of jquery plugin from here
http://belazy.blog.com/
No comments:
Post a Comment
Your feedback may help others !!!