February 15, 2014

Image slidder using javascript


Created an image slidder in java web using java script

+bithesh soubhagya


This 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/

Facebook comments