jQuery自己写的抽奖数字小插件

收藏

本文的抽奖方法基于jQuery插件写法,想学如何写插件的朋友,可以多看看。你可以在defaluts里面加自己想要的参数。如何传参呢,$('.aa').lottery({imgWrap:"ul"})

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

从0到9不同的10个数字抽奖图片

<div class="scrollPic aa"> 
    <ul> 
        <li><img src="pic/00.png" width="256" height="256" /></li> 
        <li><img src="pic/01.png" width="256" height="256" /></li> 
        <li><img src="pic/02.png" width="256" height="256" /></li> 
        <li><img src="pic/03.png" width="256" height="256" /></li> 
        <li><img src="pic/04.png" width="256" height="256" /></li> 
        <li><img src="pic/05.png" width="256" height="256" /></li> 
        <li><img src="pic/06.png" width="256" height="256" /></li> 
        <li><img src="pic/07.png" width="256" height="256" /></li> 
        <li><img src="pic/08.png" width="256" height="256" /></li> 
        <li><img src="pic/09.png" width="256" height="256" /></li> 
    </ul> 
</div>

抽奖插件方法,defaults里面的参数可以自定义设置

$.fn.extend({ 
    lottery: function(options) { 
        var defaults = { 
            'imgWrap': 'ul', 
            'imgBox': 'li' 
        } 
        var options = $.extend(defaults, options); 
        var rand = function(Min, Max) { 
            var Range = Max - Min; 
            var Rand = Math.random(); 
            return(Min + Math.round(Rand * Range)); 
        } 
        return this.each(function() { 
            var imgBox = $(this).find(options.imgBox); 
            var eachHeight = imgBox.outerHeight(); 
            var size = $(this).find(options.imgBox).size(); 
            var height = size * eachHeight; 
            var imgWrap = $(this).find(options.imgWrap); 
            imgWrap.height(height); 
            imgWrap.css({'margin-top': 0}); 
            var scrollTop = 0; 
            var index = 0; 
            var round = 0; 
            var lucky_num = rand(0, size - 1); 
            var run = function() { 
                index++; 
                if (index == 1) 
                    round++; 
                if (round == 1) { 
                    var speed = 300 - index * 30; 
                } else if (round > 7) { 
                    var speed = 300; 
                } else { 
                    var speed = 100; 
                } 
                if (round == 8 && index == (lucky_num + 1)) { 
                    //alert(lucky_num); 
                } else if (index == size) { 
                    imgWrap.css({'margin-top': 0}); 
                    index = 0; 
                    run(); 
                } else { 
                    scrollTop = -eachHeight * index; 
                    imgWrap.animate({'margin-top': scrollTop}, speed, false, run); 
                } 
            }; 
            run(); 
        }); 
    } 
});

点击抽奖事件

<input type="button" value="开始抽奖" onclick="lottery();" />

function lottery(){ 
    $('.aa').lottery(); 
}