How To Make Image SlideShow Using Javascript, Html And Css Tutorial

 

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;}