jQuery指针不动转盘动的Rotate转盘插件

素材圈提供了很多抽奖演示与下载：http://www.sucaiq.com/search.html?keyword=%25E6%258A%25BD%25E5%25A5%2596。大部分抽奖的动画效果是由rotate这块抽奖插件完成的，相关rotate抽奖教程，请看jQuery幸运大转盘_jQuery+PHP抽奖程序(上) http://www.sucaiq.com/texiao/19.html和教程下集http://www.sucaiq.com/texiao/20.html

淘建站为您提供更多_其它特效_抽奖_抽奖_rotate，在此特别感谢您对我们的支持与厚爱！

抽奖页面html代码

<div class="turntable-bg">
    <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
    <div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"/></div>
</div>

随机抽奖

function rnd(n, m) {
    return Math.floor(Math.random() * (m - n + 1) + n)
}

奖品和角度

$('.pointer').click(function() {

    if (bRotate)
        return;
    var item = rnd(0, 7);

    switch (item) {
        case 0:
            //var angle = [26, 88, 137, 185, 235, 287, 337];
            rotateFn(0, 337, '未中奖');
            break;
        case 1:
            //var angle = [88, 137, 185, 235, 287];
            rotateFn(1, 26, '免单4999元');
            break;
        case 2:
            //var angle = [137, 185, 235, 287];
            rotateFn(2, 88, '免单50元');
            break;
        case 3:
            //var angle = [137, 185, 235, 287];
            rotateFn(3, 137, '免单10元');
            break;
        case 4:
            //var angle = [185, 235, 287];
            rotateFn(4, 185, '免单5元');
            break;
        case 5:
            //var angle = [185, 235, 287];
            rotateFn(5, 185, '免单5元');
            break;
        case 6:
            //var angle = [235, 287];
            rotateFn(6, 235, '免分期服务费');
            break;
        case 7:
            //var angle = [287];
            rotateFn(7, 287, '提高白条额度');
            break;
    }

    console.log(item);
});

开始和停止抽奖

var rotateFn = function(awards, angles, txt) {
    bRotate = !bRotate;
    $('#rotate').stopRotate();
    $('#rotate').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function() {
            alert(txt);
            bRotate = !bRotate;
        }
    })
};