看了一下網上的lottery插件,看不懂(:3 」∠)
自己寫了個簡易的.....
測試地址
var thisSite = 0 //當前位置
, thisCircle = 0 //當前圈數
, circle = 5 //基本轉動圈數
, timer //計時器
, count //獎品縂個數
, speed = 40 //基本轉動速度
, thisSpeed //當前轉動速度
, prize = 8 //獎品位置,從1開始
, click = true; //鎖定開始按鈕,默認是true,轉動時為false
//點擊開始按鈕執行轉動
$('#btn').click(function(){
//當該按鈕為true的情況下才能啓動轉動,避免轉動時二次點擊
if( click ){
thisSpeed = speed;
turn();
}
});
//轉動方法
function turn(){
var box = $('#lottery')
, item = box.find('.unit');
count = item.length; //重新統計獎品個數
item.removeClass('active'); //去除所有獎品的選中效果
box.find(".unit-" + thisSite).addClass('active'); //給當前位置增加選中效果
if( thisSite == count ){ //當轉過一圈后,也就是當前位置等於獎品個數時
thisSite = 0; //當前位置清零
thisCircle ++; //增加圈數
}else{
thisSite ++; //否則位置+1
}
if( thisCircle == circle && thisSite == prize ){ //當當前圈數等於基礎轉動圈數,并且當前位置是中獎位置時
thisCircle = 0; //當前圈數清零
clearTimeout(timer); //清除計時器
click = true; //解除開始按鈕的鎖定
$('#pop').show(); //彈出獎品信息
}else{
//轉動速度的調整(寫得不好,需要重新修改)
if( thisCircle > circle/2 ){
thisSpeed += 10;
}else if( thisCircle > circle-1 ){
thisSpeed += 50;
}
timer = setTimeout('turn()',thisSpeed); //循環調用turn()方法
click = false; //開始轉動時鎖定開始按鈕
}
};
2017年6月19日 第一次更新