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"];    

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