Image Slider
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-color:teal">
<h1 style="text-align:center;font-variant:small-caps;font-family:cursive;">|| LEVI ACKERMAN ||</h1>
<div style="text-align:center;">
<img src="levi.jpg" style="border:10px solid orange;width:300px"></div>
<div style="text-align:center;margin-top:50px">
<button onclick="change()" style="margin-right:200px;border-radius:1cm;border:5px solid maroon">Previous</button>
<button onclick="change1()" style="border-radius:1cm;border:5px solid maroon">Next</button>
</div>
<script type="text/javascript">
var image=["levi.jpg","levi1.png","levi2.jpg"]
var img=document.getElementsByTagName("img");
var x=0;
function change1(){
if(x<image.length-1){
x++;
img[0].src=image[x];
}
else{
x=-1;
}
}
function change(){
if(x>0){
x--;
img[0].src=image[x];
}
else{
x=2;
img[0].src=image[x];
}
}
</script>
</body>
</html>
Comments
Post a Comment