基於canvas的圖片輪播（h5）

    <canvas id=topimage></canvas>

js:

var c = document.getElementById("topimage"),
    ctx = c.getContext("2d"),
    topIndex = 0,
    si, max = 3;
var data = ['http://img4.imgtn.bdimg.com/it/u=2578790144,613359404&fm=21&gp=0.jpg',
    'http://img5.imgtn.bdimg.com/it/u=1898866107,2864688972&fm=21&gp=0.jpg',
    'http://img4.imgtn.bdimg.com/it/u=1623237245,4214756223&fm=21&gp=0.jpg'
];
window.onload = function() {
    document.body.style.margin = 0;
    topimg();
}

function topimg() {
    var t = this;
    var c = document.getElementById("topimage");
    var ctx = c.getContext("2d");
    var img = new Image;
    img.src = data[0];
    img.addEventListener('load', function(){
    c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0, c.width, c.height);
        c.style.width = '100%';
        t.topbottomdot();
    }, false); //初始化
      for (var i = 1; i <max; i++) {
        var im = new Image;
        im.src = data[i];
        im.addEventListener('load',null,false);
    }

    document.getElementById("topimage").addEventListener("touchstart", function(e) {
        x1 = e.touches[0].pageX;
        img.src = data[topIndex%max];
    }, false);


    document.getElementById("topimage").addEventListener("touchmove", function(e) {
        e.preventDefault(); //for ios 微信
        x2 = e.touches[0].pageX;
        x1 && t.toptranslate(x2 - x1, img);
    }, false);


    document.getElementById("topimage").addEventListener("touchend", function(e) {
        t.toptranslateEnd(x2 - x1, img);
    }, false);
}


function toptranslate(x, img) {
    var t = this;
    c.height = c.height;
    ctx.drawImage(img, x, 0, c.width, c.height);
    var nextImg = new Image;
    if (x < 0) {
        nextImg.src = data[(topIndex+1)%max];
        ctx.drawImage(nextImg, x + c.width + 10, 0, c.width, c.height);
    } else {
        nextImg.src = data[((topIndex === 0?max:topIndex)-1)%max];
        ctx.drawImage(nextImg, x - c.width - 10, 0, c.width, c.height);
    }
    t.topbottomdot();
}
function toptranslateEnd(x, img) {
    var t = this;
    var nextImg = new Image;
    clearInterval(si);
    t.topbottomdot();
    var tpmax = 3;
    if (x < -100) { //左
        if (++topIndex > max)
            topIndex -= max;
        nextImg.src = data[topIndex%max];
        si = setInterval(function() {
            c.height = c.height;
            ctx.drawImage(nextImg, x + img.width + 10, 0, c.width, c.height);
            ctx.drawImage(img, x, 0, c.width, c.height);
            x -= 20;
            if (x <= -c.width) {
                clearInterval(si);
                c.height = c.height;
                ctx.drawImage(nextImg, 0, 0, c.width, c.height);
            }
            t.topbottomdot();
        }, 5);
    } else if (x > 100) {
        if (--topIndex < 0)
            topIndex += max;
        nextImg.src = data[topIndex%max];
        si = setInterval(function() {
            c.height = c.height;
            ctx.drawImage(nextImg, x - img.width - 10, 0, c.width, c.height);
            ctx.drawImage(img, x, 0, c.width, c.height);
            x += 20;
            t.topbottomdot();
            if (x > c.width) {
                clearInterval(si);
                c.height = c.height;
                ctx.drawImage(nextImg, 0, 0, c.width, c.height);
            }
            t.topbottomdot();
        }, 5);
    } else if (x < 0) {
        nextImg.src = img.src;
        si = setInterval(function() {
            c.height = c.height;
            ctx.drawImage(nextImg, x + img.width + 10, 0, c.width, c.height);
            ctx.drawImage(img, x, 0, c.width, c.height);
            x -= 8;
            if (x <= 0) {
                clearInterval(si);
                c.height = c.height;
                ctx.drawImage(img, 0, 0, c.width, c.height);
            }
            t.topbottomdot();
        }, 5);
    } else {
        nextImg.src = img.src;
        si = setInterval(function() {
            c.height = c.height;
            ctx.drawImage(nextImg, x - img.width - 10, 0, c.width, c.height);
            ctx.drawImage(img, x, 0, c.width, c.height);
            x += 8;
            if (x >= 0) {
                clearInterval(si);
                c.height = c.height;
                ctx.drawImage(img, 0, 0, c.width, c.height);
            }
            t.topbottomdot();
        }, 5);
    }
}


function topbottomdot() {
    var t = this;
    var ctx = c.getContext("2d");
    for (var i = 0, max = 3; i < max; i++) {
        ctx.beginPath();
        ctx.arc(c.width / 2 - 10 * (max - 1) + 20 * i, c.height - 14, 5, 0, 360, false);
        if (i === topIndex % max)
            ctx.fillStyle = "#ccc";
        else
            ctx.fillStyle = "#f2f2f2";
        ctx.fill();
        ctx.closePath();
    }
}

演示【暫，會報毒。。。】：http://192369.vhost326.cloudvhost.cn/16612    手機打開或模擬手機