九宫格抽奖案例

1.简单布局，就9张图片，抽奖按钮
2.在点击“抽奖”按钮之后，开启定时器。将九宫格九个获奖信息存入对象中，根据索引值设置提示内容（恭喜获得xxx）；
3.在定时器中，根据索引值让每个图片执行被选中的状态。

 $("img").eq(index).addClass("cur");
$("img").eq(index).siblings().removeClass("cur");
index++;

4.获取随机值，必然是转一圈再停下，人工设置：转的个数total
然后在每个每次执行图片状态切换之后，total-1，当total为 0 的时候停止定时器。

 var total = parseInt(Math.random() * 10) + 9;

5.被选中的格子有个闪烁状态。
人工设置：隐入再隐出。

$("img").eq(index-1).fadeOut(500).fadeIn(500);

测试案例：

 $(function () {
 // 1.设置背景图片-----------------可以自由选择操作手法。在html中操作也可以
    $("img").each(function (idx, ele) {
        // 1.1拼接图片地址
        var url = "images/luck/0"+(idx+1)+".jpg";
        // 2.将图片地址设置给img
        $(ele).attr("src", url);
    });
        var goods = {
            '0':'iPhone手机',
            '1':'程序员鼓励师',
            '2':'红牛耳机',
            '3':'iWatch',
            '4':'感谢参与',
            '5':'MacBook',
            '6':'布娃娃',
            '7':'机械键盘',
            '8':'江哥约会1次'
       };
            // 2.实现抽奖动画
            $("p").click(function () {
                // 2.-1生成动画执行次数
                var total = parseInt(Math.random() * 10) + 9;
				
                // 2.0定义变量当做动画索引
                var index = 0;
                // 2.1开启定时器
                var timer = setInterval(function () {
                    // 判断是否是最后一个
                    if(index == 9){
                        index = 0;
                    }
                    // 2.2依次设置每个img的样式为cur
                    $("img").eq(index).addClass("cur");
                    // 2.3清除其它img的样式
                    $("img").eq(index).siblings().removeClass("cur");
                    // 2.4让索引递增
                    index++;
                    // 2.5让执行次数递减
                    total--;
                    console.log(total);
                    // 2.6判断是否需要停止动画
                    if(total == 0){
                        // 2.7关闭定时器
                        clearInterval(timer);
                        // 2.8中奖动画
                        $("img").eq(index-1).fadeOut(500).fadeIn(500);
                        // 2.9弹出中奖结果
                       alert(goods[index - 1]);
                    }
                }, 50);
				});
        });