GoSlideshow HTML5 Canvas

• 下载 GoSlideshow_HTML5_Canvas.zip - 264.5 KB

引言

GoSlideshow 是一个简单而强大的图片轮播，适用于支持 HTML5 的所有网络浏览器，甚至智能手机。

代码

图像

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

函数

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

关注点

Html5 Canvas 实验

历史

1.6 版