Introduction
This tip is meant to give others a shortcut on how to get quick image sliding effect on the webpage without much trouble and no JQuery.
Background
I came across this site while looking for a way to animate a group of images. And from all my options, I found it to be the simplest one. After researching html 5 a very simple option, although not the effect was also quite simple, was possible with the help of canvas and javascript.
1. Using menu cool
Download their folder and place the file in your project. Then add:
<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>
Inside your page, add/type the following div
block:
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/javascript-image-slider"
target="_blank">
<img src="images/image-slider-1.jpg"
alt="Welcome to Menucool.com" />
</a>
<img src="yourImage"
alt="This will show on yourImage caption" />
<img src="yourOtherImage"
alt="This will show on yourOtherImage caption" />
<img src="yourOtherOTherImage" alt="#htmlcaption" />
</div>
<div id="htmlcaption" style="display: none;">
<p>"This will show on yourOtherOTherImage caption"</p>
</div>
</div>
2. Using HTML 5
On your html page have a canvas, if with assign an Id, even better
<canvas id="theCanvas">
At the place you have your javascript for the page
var pathToYourImages = ["pathToimage.imageExt", "pathToimage2.imageExt", "pathToimage3.imageExt", ....];
var canvas = null;
var contextForCanvas = null;
var image = null;
var currentImage = 0;
window.onload = function() {
canvas = document.getElementById('theCanvas');
contextForCanvas = canvas.getContext('2d');
image = document.createElement("img");
ImageSliding();
};
function ImageSliding() {
image.setAttribute('src', pathToYourImages[currentImage]);
currentImage = currentImage === (pathToYourImages.length - 1) ? 0 : ++currentImage;
contextForCanvas.globalAlpha = 0.1;
setTimeout(ShowImage, 200);
}
function ShowImage() {
contextForCanvas.save();
contextForCanvas.clearRect(0, 0, canvas.width, canvas.height);
contextForCanvas.drawImage(image, 0, 0, 300, 150);
contextForCanvas.globalAlpha += 0.1;
contextForCanvas.globalAlpha > 0.9 ? setTimeout(ImageSliding, 3500) : setTimeout(ShowImage, 200);
}
Conclusion
Basically, these are two ways to get the effect. It's advisable to always research in more than one place and evaluate what would be the best solution for your problem. I hope this helps.
Reference