位置: 编程技术 - 正文
js组件SlotMachine实现图片切换效果制作抽奖系统(Js组件开发方式)
编辑：rootadmin推荐整理分享js组件SlotMachine实现图片切换效果制作抽奖系统(Js组件开发方式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js组件和插件的区别,js组件和插件的区别,js组件和插件的区别,js开发组件,js 组件,js组件开发教程,Js组件开发方式,js 组件,内容如对您有帮助，希望把文章链接给更多的朋友！
前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了小时候满满的回忆。
下面就带着大家来看看这么一个神奇的组件——SlotMachine吧。
一、组件预览
先来一发简单的效果压压惊
觉得太简单？别急，好戏在后头，试试手气先。
什么？还没达到想要的效果，好！下面，真实效果来一发。
点击了好长时间，都没有中奖，难怪小时候怎么都赢不了呢。不信邪，继续点击开始，终于有一次中奖的了，真心不容易。
还有我们年终抽奖效果，开始！停止！
二、代码示例
既然是js组件，肯定是先要下载组件库。首先贴上 开源地址
然后来看看文件的引用：
这里需要注意几点：
1）、引用jquery和bootstrap都是通过cdn加速的方式引用的，不懂cdn加速的可以百度。2）、Jquery组件必须，并且组件需要Jquery 2.0以上版本的支持，版本太低会有js异常。3）、bootstrap组件并非必须，但是本篇布局需要部分bootstrap的样式支持。4）、toastr组件并非必须，此处用于显示中奖的结果。1、试试手气效果代码html部分
JS部分
JS常用属性、方法、事件详解
（1）初始化方法 var machine = $("#id").slotMachine({}); 返回当前旋转的对象。slotMachine()方法里面传递初始化的参数，比如
active：表示初始化的时候显示项的索引，从0开始delay：切换两张图片的间隔时间（毫秒单位）auto：是否自动旋转，取值为true or falsespins：当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(); 摧毁旋转节点2、简单游戏机效果代码示例html部分
JS部分
3、单个停止效果代码示例Html部分
JS部分
三、总结整个过程并不复杂，所有的属性、事件、方法基本看看文档都能很好理解运用，演示代码也没什么好说的，一看就懂，希望对大家学习javascript组件有所帮助。
JS区分浏览器页面是刷新还是关闭 Web开发者在系统开发中经常要面对产品经理各式各样的需求，当然，大部分对产品体验还是有帮助的，例如我们今天提到的刷新页面，前进后退，关闭
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法 本文实例讲述了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法。分享给大家供大家参考，具体如下：setTimeout用于延时器,只执行一次.setIn
ArtEditor富文本编辑器增加表单提交功能 摘要：artEditor.js是一款移动端的富文本编辑器，支持图片上传，后面会增加表情、小视频等功能。最近有朋友反馈artEditor是否支持表单提交，当然是支
标签: Js组件开发方式
本文链接地址:https://www.jiuchutong.com/biancheng/373463.html 转载请保留说明！
