zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Python入门11 —— 基本数据类型的操作
    Win10安装7 —— 系统的优化
    Win10安装6 —— 系统的激活
    Win10安装5 —— 系统安装步骤
    Win10安装4 —— 通过BIOS进入PE
    Win10安装2 —— 版本的选择与下载
    Win10安装1 —— 引言与目录
    Win10安装3 —— U盘启动工具安装
    虚拟机 —— VMware Workstation15安装教程
    Python入门10 —— for循环
  • 原文地址:https://www.cnblogs.com/vicky123/p/10454861.html
Copyright © 2011-2022 走看看