Click here to Skip to main content
11,702,130 members (62,605 online)
Click here to Skip to main content

GoSlideshow HTML5 Canvas

, 17 May 2012 MPL 23.6K 1.6K 22
Rate this:
Please Sign up or sign in to vote.
HTML5 CANVAS

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

License

This article, along with any associated source code and files, is licensed under The Mozilla Public License 1.1 (MPL 1.1)

Share

About the Author

Agon Avdimetaj
CEO Graphsix Studio
Albania Albania
CEO / Web & App Developer @ Graphsix Studio.
Studying Computer Engineering @ Faculty of Electrical and Computer Engineering, UP.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 3 Pin
Ed Nutting26-Aug-12 14:31
memberEd Nutting26-Aug-12 14:31 
GeneralMy vote of 1 Pin
KentEVela10-Jul-12 8:52
memberKentEVela10-Jul-12 8:52 
GeneralMy vote of 1 Pin
Jani Giannoudis13-Jun-12 23:22
mvpJani Giannoudis13-Jun-12 23:22 
GeneralMy vote of 1 Pin
Pranay Rana13-Jun-12 0:24
memberPranay Rana13-Jun-12 0:24 
Question[My vote of 1] This is not an article Pin
Sacha Barber11-Jun-12 6:16
mvpSacha Barber11-Jun-12 6:16 
GeneralMy vote of 1 Pin
ryanthemadone11-Jun-12 5:35
memberryanthemadone11-Jun-12 5:35 
GeneralMy vote of 5 Pin
frazzle-me10-Jun-12 8:07
memberfrazzle-me10-Jun-12 8:07 
GeneralMy vote of 5 Pin
catcoptor9-Jun-12 2:13
membercatcoptor9-Jun-12 2:13 
BugBugs + Fix Pin
Vitaly Tomilov22-May-12 9:43
memberVitaly Tomilov22-May-12 9:43 
GeneralMy vote of 5 Pin
eddy morrison22-May-12 2:15
membereddy morrison22-May-12 2:15 
GeneralMy vote of 5 Pin
TRIInc21-May-12 10:53
memberTRIInc21-May-12 10:53 
GeneralRe: My vote of 5 Pin
Vitaly Tomilov22-May-12 8:34
memberVitaly Tomilov22-May-12 8:34 
GeneralMy vote of 5 Pin
Akram El Assas21-May-12 1:36
memberAkram El Assas21-May-12 1:36 
GeneralMy vote of 4 Pin
Vitaly Tomilov20-May-12 12:13
memberVitaly Tomilov20-May-12 12:13 
GeneralRe: My vote of 4 Pin
Member 767909622-May-12 5:09
memberMember 767909622-May-12 5:09 
GeneralquiteRe: My vote of 4 Pin
Vitaly Tomilov22-May-12 8:30
memberVitaly Tomilov22-May-12 8:30 
GeneralRe: My vote of 4 Pin
Vitaly Tomilov22-May-12 9:44
memberVitaly Tomilov22-May-12 9:44 
GeneralRe: My vote of 4 Pin
Member 767909623-May-12 0:43
memberMember 767909623-May-12 0:43 
GeneralRe: My vote of 4 Pin
Vitaly Tomilov23-May-12 11:21
memberVitaly Tomilov23-May-12 11:21 
QuestionMy vote For This Pin
onurag1917-May-12 21:11
memberonurag1917-May-12 21:11 
GeneralMy vote of 5 Pin
onurag1917-May-12 21:11
memberonurag1917-May-12 21:11 
GeneralMy vote of 5 Pin
ruddyl17-May-12 16:10
memberruddyl17-May-12 16:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 17 May 2012
Article Copyright 2012 by Agon Avdimetaj
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid