How To Make Image SlideShow Using Javascript, Html And Css Tutorial
Html Source Code
<!DOCTYPE html><html><head><title>Slider</title><link rel=”stylesheet” href=”style.css”/><link rel=”stylesheet” href=”fontawesome/css/font-awesome.css”/><script style=”text/javascript” src=”javakl.js”></script>
</head><body>
<div id=”container”>
<p id=”pic”></p>
<div id=”sliderdiv”> <img src=”images/Chrysanthemum.jpg” height=”400px” width=”900px” id=”imagethmb”/> <div id=”buttons”><a href=”#” onclick=”startslide(1)” > > </a> <img src=”images/next.png” onclick=”startslide(1)” height=”70px” width=”70px” class=”next”\/> <img src=”images/previous.png” onclick=”startslide(-1)” height=”70px” width=”70px” class=”previous”/></div> <div id=”caption”> <p id=”cap”>caption</p> </div> </div></div></body></html>
Javascript Source Code
var images = [“images/Chrysanthemum.jpg”, “images/Desert.jpg”, “images/Hydrangeas.jpg”, “images/Jellyfish.jpg”, “images/Koala.jpg” ];
var caption = [“caption 1”, “caption 2”, “caption 3″,”caption 4”, “caption 5” ];
var imagePos = 0;var imagesLenth = images.length – 1;
function startslide(x){ imagePos += x;
if(imagePos > imagesLenth) { imagePos =0; }
if(imagePos < 0) { imagePos = imagesLenth; }
document.getElementById(‘imagethmb’).src = images[imagePos];document.getElementById(‘cap’).innerHTML = caption[imagePos];
}
setInterval(function startslide(){ imagePos ++;
if(imagePos > imagesLenth) { imagePos =0; }
if(imagePos < 0) { imagePos = imagesLenth; }
document.getElementById(‘imagethmb’).src = images[imagePos];document.getElementById(‘cap’).innerHTML = caption[imagePos];
},1000);
Css Source Code
*{ padding: 0px; margin: 0px;}
#container { width:900px; height: auto; margin-left: auto; margin-right: auto;}
#sliderdiv { height: 400px; width: 100%; position:relative;}
#left { height:80px; width:80px;}
#buttons { height:100px; width:100%; position:absolute; top:28%;
}
.next { float:right; line-height:100px; }
.previous { float:left; vertical-align:center;}
#caption { height:100px; width:100%; background-color:black; position:absolute; opacity:0.5; bottom:0; color:white;}