How to make dynamic banner using single javascript function

on


<!DOCTYPE html>
<html>
<style type="text/css">

#wrapper
{
margin-left:300px;
margin-right:130px;
margin-top:30px;
width : 700px;
height :200px;
}
#banner
{
width: 100%;
height:100%;
position:relative;
}
#bip
{
text-align:center;
font-size : 20px;
color :red;
}
</style>
<body onload="myFunction()">
<div id="wrapper">
<a id="bannerclick" href="#">
<img id="banner" src="a.jpg"></img></a>
</br></br>

<div id="bip"></div>

<script>
   var counter = 1;
var intervalId = null;
var totalimg=0;
var imgsrc="a.jpg";
var imglink="#";
var x=10;
function bip()
{
var imgobj = document.getElementById("banner");
var imglinkh=   document.getElementById("bannerclick");
 document.getElementById("bip").innerHTML = totalimg +1;
 
 imgobj.src = imgsrc;
 
// imgobj.style.right = counter + 'px';
 
 imglinkh.href = imglink;
 counter=counter+1;
 
 if(counter==100)
 {
counter=1;
totalimg=totalimg+1;
if(totalimg==1)
{
imgsrc="b.jpg";
imglink="#";
}
else if(totalimg==2)
{
imgsrc="c.jpg";
imglink="#";
}
else if(totalimg==3)
{
imgsrc="d.jpg";
imglink="#";
totalimg=0;
}
 }
}
function myFunction() 
{
   
intervalId = setInterval(bip, 30);
}
</script>

</body>
</html>

Comments

Post a Comment