If you want image slider using Javascript then you can use below code .
CSS Code :
<style type="text/css">
// to make a gap from top
body {
margin-top: 100px;
}
// give styling to list
.navlist ul li{
float: left;
text-align: center;
margin: 10px;
margin-top: 3px;
list-style: none;
cursor: pointer;
background-color: rgba(126, 118, 108, 0.92);
padding: 7px;
/*border-radius: 50%;*/
border: black 0px solid;
z-index: 1
}
.navlist ul li.arrow1{ height: 36px;
width: 10px;
background: url("images/arrow.gif") -100px 0; // sprit image concept and set the path of image
}
.navlist ul li.arrow2{ height: 36px;
width: 10px;
background: url("images/arrow.gif") -125px 0; // sprit image concept and set the path of image
}
.wrapper .content{
height: 100px;
border: 2px black solid;
border-radius: 12px;
overflow: hidden;
z-index: 0;
}
</style>
Javascript Code :
<script type="text/javascript">
var MySlides = new Array("banner1.png","banner2.png","banner3.png","banner4.png"); // array which contain all images .
var slide =0;
// function , to slide the images
function ShowSlides(SlideNumber){
if(slide > 3){
slide = 0 ;
document.DisplaySlide.src="images/"+MySlides[slide];
document.DisplaySlide.alt=MySlides[slide];
}
else{
document.DisplaySlide.src="images/"+MySlides[slide];
slide = slide + SlideNumber
document.DisplaySlide.alt=MySlides[slide]
}
}
</script>
Html Code :
<!DOCTYPE HTML>
<html>
<head>
<script src="myscripts.js"></script> // external javascript
<link rel="stylesheet" type="text/css" href="mystyle.css"> // external css
</head>
<body>
<center>
<div class="navlist" style="height: 111px;">
<div class="content">
<div>
<p><img src="images/banner1.png" name="DisplaySlide" alt="banner1.png"></p>
<div style="margin-left: 282px;position: absolute;top: 194px;">
<ul>
<li class="arrow1" onclick="ShowSlides(1)" style="position: absolute;top:87px;right:17px"><a href=""></a></li> // sprites image concept
<li class="arrow2" onclick="ShowSlides(1)" style="/* float:left; */position: absolute;right: -937px;top: 87px;"></li> // sprites image concept
</ul>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
0 Comment(s)