3列滚动抽奖 jquery.slotmachine

效果图：

 

 

需引入js文件:

<script src="js/jquery-3.2.0.js"></script>
<script src="js/jquery.slotmachine.js"></script>

html代码：

<div class="draw_wrap">
    <dl class="clearfix">
        <dd id="machine1" class="mui-pull-left">
            <div class="cell">
               <img src="images/1-1.png" />
            </div>
            <div class="cell">
                <img src="images/1-2.png" />
            </div>
            <div class="cell">
                 <img src="images/1-3.png" />
            </div>
        </dd>
        <dd id="machine2" class="mui-pull-left">
            <div class="cell">
                <img src="images/1-2.png" />
            </div>
            <div class="cell">
                <img src="images/1-3.png" />
            </div>
            <div class="cell">
                <img src="images/1-1.png" />
            </div>
        </dd>
        <dd id="machine3" class="mui-pull-left">
             <div class="cell">
                 <img src="images/1-3.png" />
             </div>
             <div class="cell">
                  <img src="images/1-1.png" />
             </div>
             <div class="cell">
                  <img src="images/1-2.png" />
             </div>
        </dd>
    </dl>
    <div id="stopBtn" class="stop_btn" data-type="stopBtn"></div>
       <div class="result">
           <p>未中奖，再接再厉</p>
           <a id="alignBtn" class="align_btn" href="#">再来一次</a>
       </div>
    </div>
</div>

 

js代码:

$(function () {                
    var machine1 = $("#machine1").slotMachine({
        active:0,
        delay:500
    });                
    var machine2 = $("#machine2").slotMachine({
        active:1,
        delay:500
    });                
    var machine3 = $("#machine3").slotMachine({
        active:2,
        delay:500
    });
    function startSlotmachine(){
        machine1.shuffle();
        machine2.shuffle();
        machine3.shuffle();        
    }
    startSlotmachine()
    $("#alignBtn").click(function(){
        startSlotmachine()
    });                
    $("#stopBtn").click(function(){
        if(machine1.isRunning()){
            machine1.stop(true);
            setTimeout(function(){
                setTimeout(machine2.stop(true));
            },500)
            setTimeout(function(){
                setTimeout(machine3.stop(true));
            },1000)
        }
    });
});        

 

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(); 摧毁旋转节点

 

完整代码：https://github.com/eleven-123/jquery.slotmachine