Computer Engineering: JavaScript Rotating Banner..!

Thursday, April 4, 2013

JavaScript Rotating Banner..!

Hello, All... Below shown is a code for Javascript Banner Rotation.
You can use this code for displaying Advertisement in your webpage.
Also include this CSS(rotat.css) file for setting absolute position and z-index property.

1.) rotat.css

/* CSS Document */
#block img{
 position:absolute;
 width:200px;
    z-index=1;
}

2.) rotate.html

<html>
<head>
<title>Rotate</title>
<link rel="stylesheet" type="text/css" href="rotat.css" />
<script type="text/javascript">
 var cur=1;
 function rotate(){
  
  if(cur<=5){
  document.getElementById('i'+cur).style.zIndex+=1;
  ++cur;
  }
  else{
   cur=1;
  }
 }
 
 function strtRotate(){
  setInterval("rotate()",700);
 }

</script>
</head>
<body onload="return strtRotate()">
 <div id="block"  align="center">
 
     
     <img src="1.png" id="i1"/>
  <img src="2.png" id="i2"/>
        <img src="3.png" id="i3"/>
        <img src="4.png" id="i4"/>
        <img src="5.png" id="i5"/>
   
    </div>
</body>
</html>

N'joy Friends..!

1 comment:

way2 collegeApril 4, 2013 at 9:13 PM
NICE BLOG!!! Engineering course is one of the most excellent choices for students from science background, in conditions of scope as well as bright career. It is a vast field that put forward numerous streams and specialty choices. Thanks for sharing a nice information.
Top Fashion Design Colleges in Delhi
Fashion Design Institutes in Delhi

ReplyDelete
Replies

Add comment

Computer Engineering

Search This Blog

Thursday, April 4, 2013

JavaScript Rotating Banner..!

1 comment:

Followers