JS组件系列——图片切换特效：简易抽奖系统

一时失言乱红尘 2022-07-13 02:49 189阅读 0赞

阅读目录

*  [一、组件预览][Link 1]
 *  [二、代码示例][Link 2]
    
     *  [1、试试手气效果代码][1]
     *  [2、简单游戏机效果代码示例][2]
     *  [3、单个停止效果代码示例][3]
 *  [三、总结][Link 3]

正文

前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了博主小时候满满的回忆。于是下定决定要研究下这么一个东西，不得不再次叹息开源社区的强大，原来这些组件已经被封装得这么好了，使用起来如此简单。下面就让博主带着大家来看看这么一个神奇的组件——SlotMachine吧。

[回到顶部][Link 4]

# 一、组件预览 #

先来一发简单的效果压压惊

![459756-20160322163911245-1936384214.gif][]

觉得太简单？别急，好戏在后头，试试手气先。

![459756-20160322164021901-564716265.gif][]

什么？还没达到想要的效果，好！下面，真实效果来一发。

![459756-20160322165454948-2088854184.gif][]

博主点击了好长时间，都没有中奖，难怪小时候怎么都赢不了呢。博主不信邪，继续点击开始，终于有一次中奖的了，真心不容易。

![459756-20160322203120479-830793532.png][]

还有我们年终抽奖效果，开始！停止！

![459756-20160322164241901-1675300672.gif][]

[回到顶部][Link 4]

# 二、代码示例 #

既然是js组件，肯定是先要下载组件库。首先贴上 [开源地址][Link 5]

![459756-20160322203409870-2085563985.png][]

然后来看看文件的引用：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

这里需要注意几点：

*  引用jquery和bootstrap都是通过cdn加速的方式引用的，不懂cdn加速的可以百度。
 *  Jquery组件必须，并且组件需要Jquery 2.0以上版本的支持，版本太低会有js异常。
 *  bootstrap组件并非必须，但是本篇布局需要部分bootstrap的样式支持。
 *  toastr组件并非必须，此处用于显示中奖的结果。

[回到顶部][Link 4]

## 1、试试手气效果代码 ##

html部分

![复制代码][copycode.gif]

<div id="triky">
            <div class="content" style="text-align: center">
                <h1>请选择你想吃的食物</h1>
    
                <div class="row">
                    <div style="margin: auto;">
                        <div id="triky1">
                            <div>
                                <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" />
                            </div>
                            <div>
                                <img src="/Content/jQuery-SlotMachine-master/img/food1.jpg" />
                            </div>
                            <div>
                                <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" />
                            </div>
                            <div>
                                <img src="/Content/jQuery-SlotMachine-master/img/food3.jpg" />
                            </div>
                        </div>
                        <div>
                            <div class="btn-group btn-group-justified btn-group-triky" style="margin-left:-15px" role="group">
                                <div id="trikyShuffle" type="button" class="btn btn-primary btn-lg">试试手气</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="clearfix"></div>
        </div>

![复制代码][copycode.gif]

JS部分

![复制代码][copycode.gif]

$(function () {
                //试试手气
                var triky = $("#triky1").slotMachine({
                    active: 2,   //初始化的时候显示的项的索引
                    //delay: 150,//切换两张图片的间隔时间（毫秒单位）
                    //randomize: function () {
        
                    //    return 0;//每次旋转后选中值的索引（从0开始）
                    //}
                });
    
                $("#trikyShuffle").click(function () {
                    triky.shuffle(8);//开始旋转方法，参数8表示每次旋转跳过8个图标
                });
            });

![复制代码][copycode.gif]

JS常用属性、方法、事件详解

（1）初始化方法 var machine = $("\#id").slotMachine(\{\}); 返回当前旋转的对象。slotMachine()方法里面传递初始化的参数，比如

*  active：表示初始化的时候显示项的索引，从0开始
 *  delay：切换两张图片的间隔时间（毫秒单位）
 *  auto：是否自动旋转，取值为true or false
 *  spins：当auto为true的时候，这是每次跳过图标的个数
 *  stophidden：是否出现开始和停止时候的动画
 *  randomize:function(activeElementIndex)\{\}此属性表示每次旋转后选中值的索引（从0开始）
 *  direction：动画的方向，取值（up||down）

（2）常用方法

*   machine.shuffle( repeat, onStopCallback ); 表示开始旋转，repeat表示每次跳过的图片个数；onstopCallback表示旋转停止后的事件回调方法。
 *   machine.prev(); 返回前一个元素
 *   machine.next(); 返回后一个元素
 *   machine.stop(); 停止旋转
 *   machine.active; 得到选中的元素的索引
 *   machine.running; 检测是否正在旋转，true表示正在旋转
 *   machine.stopping; 检测是否已经停止
 *   machine.destroy(); 摧毁旋转节点

[回到顶部][Link 4]

## 2、简单游戏机效果代码示例 ##

html部分

![复制代码][copycode.gif]

<div id="randomize">
            <div class="content container" style="text-align: center;max-width: 900px;">
                <h1>简易游戏机</h1>
    
                <div class="row">
                    <div class="col-xs-4">
                        <div>
                            <div id="machine1" class="randomizeMachine">
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-xs-4">
                        <div>
                            <div id="machine2" class="randomizeMachine">
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-xs-4">
                        <div>
                            <div id="machine3" class="randomizeMachine">
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
                                <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div>
                    <div class="btn-group btn-group-justified btn-group-randomize" role="group">
                        <div id="ranomizeButton" type="button" class="btn btn-danger btn-lg">开始</div>
                    </div>
                </div>
            </div>
        </div>

![复制代码][copycode.gif]

JS部分

![复制代码][copycode.gif]

$(function () {
                //简易游戏机
                var machine1 = $("#machine1").slotMachine({
                    active: 0,
                    delay: 500
                });
    
                var machine2 = $("#machine2").slotMachine({
                    active: 1,
                    delay: 500,
                    direction: 'down'
                });
    
                var machine3 = $("#machine3").slotMachine({
                    active: 2,
                    delay: 500
                });
    
                var arr = [];
                function onComplete(active) {
                    if (arr.length <= 1) {
                        arr.push(active);
                    }
                    else if (arr.length > 1) {
                        arr.push(active);
                        if (arr[0] == arr[1] && arr[1] == arr[2]) {
                            toastr.success("恭喜你中奖了！");
                        }
                        else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) {
                            toastr.success("还差一点，继续加油");
                        }
                        else {
                            toastr.success("手气不行");
                        }
                        arr = [];
                    }
                }
    
                $("#ranomizeButton").click(function () {
    
                    machine1.shuffle(5, onComplete);
    
                    setTimeout(function () {
                        machine2.shuffle(5, onComplete);
                    }, 500);
    
                    setTimeout(function () {
                        machine3.shuffle(5, onComplete);
                    }, 1000);
    
                })
            });

![复制代码][copycode.gif]

[回到顶部][Link 4]

## 3、单个停止效果代码示例 ##

Html部分

![复制代码][copycode.gif]

![复制代码][copycode.gif]

JS部分

![复制代码][copycode.gif]

$(function () {
                //单个停止
                var machine4 = $("#casino1").slotMachine({
                    active: 0,
                    delay: 500
                });
    
                var machine5 = $("#casino2").slotMachine({
                    active: 1,
                    delay: 550
                });
    
                machine6 = $("#casino3").slotMachine({
                    active: 2,
                    delay: 600
                });
    
                var started = 0;
    
                $("#slotMachineButtonShuffle").click(function () {
                    started = 3;
                    machine4.shuffle();
                    machine5.shuffle();
                    machine6.shuffle();
                });
    
                $("#slotMachineButtonStop").click(function () {
                    switch (started) {
                        case 3:
                            machine4.stop();
                            break;
                        case 2:
                            machine5.stop();
                            break;
                        case 1:
                            machine6.stop();
                            break;
                    }
                    started--;
                });
            });

![复制代码][copycode.gif]

[回到顶部][Link 4]

# 三、总结 #

整个过程并不复杂，所有的属性、事件、方法基本看看文档都能很好理解运用，演示代码也没什么好说的，一看就懂。组件本身在一般的系统里面可能很难有用武之地，本篇作为怀旧之作，以此来纪念我们已经逝去的童年。原来制作一个这种简单游戏如此easy，下次年会，你都可以做一个抽奖系统了，只要有图片素材，一个字：简单。至此，本篇基本结束。如果本篇也引起了你的共鸣，不妨推荐哈，欢迎园友拍砖~~

[Link 1]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label0
[Link 2]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label1
[1]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_0
[2]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_1
[3]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_2
[Link 3]: http://www.cnblogs.com/landeanfen/p/5307330.html#_label2
[Link 4]: http://www.cnblogs.com/landeanfen/p/5307330.html#_labelTop
[459756-20160322163911245-1936384214.gif]: /images/20220713/2e8fbe0f40a94f71981668cd4a3cfde7.png
[459756-20160322164021901-564716265.gif]: /images/20220713/3522c5d5a3ea4b08b197b5b3f494e0bb.png
[459756-20160322165454948-2088854184.gif]: /images/20220713/9437617d52d24cf8b1051be8183264e6.png
[459756-20160322203120479-830793532.png]: /images/20220713/5df5d03eded14bdcad5b4f7438daf1b0.png
[459756-20160322164241901-1675300672.gif]: /images/20220713/34737a080cd94a2ea9563a70f8620403.png
[Link 5]: https://github.com/josex2r/jQuery-SlotMachine
[459756-20160322203409870-2085563985.png]: /images/20220713/05baa096295745389c3c31f9272f2290.png
[copycode.gif]: /images/20220713/b9a87ddc760b44eea2fceddcda740c3e.png