GoSlideshow HTML5 Canvas

• ownload GoSlideshow_HTML5_Canvas.zip - 264.5 KB

Introduction

GoSlideshow is a simple awesome image slider, created for each web browser that supports HTML5, even in smartphones.

The Code

Images:

var imagePaths = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];    

Declaration:

var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;

window.onload = function () {
                showCanvas = document.getElementById('GoSlideshow');
                showCanvasCtx = showCanvas.getContext('2d');
                
                img.setAttribute('width','600');
                img.setAttribute('height','400');
                switchImage();
                
                setInterval(switchImage,3000);
            } 

Functions:

            function switchImage() {
                img.setAttribute('src',imagePaths[currentImage++]);
                if (currentImage >= imagePaths.length)
                    currentImage = 0;
                
                showCanvasCtx.globalAlpha = 0.1;
                revealTimer = setInterval(revealImage,100);
            }
            
            function revealImage() {
                showCanvasCtx.save();
                showCanvasCtx.drawImage(img,0,0,600,400);
                showCanvasCtx.globalAlpha += 0.1;
                if (showCanvasCtx.globalAlpha >= 1.0)
                    clearInterval(revealTimer);
                showCanvasCtx.restore();
            } 

Points of Interest

Html5 Canvas Experiments

History

Version 1.6