Marquee Lottery jQuery plugin for more convenient create lottery activity.You only need to care about the CSS or HTML code.

Composer

composer require bower-asset/marquee-lottery

Bower

bower install marquee-lottery

NPM

npm install marquee-lottery

$(function(){
   $('.btn').marquee({
       activeClass:'active-img',
       finishCallback:function(){
           alert(1);
       },
       ele:[
           '.first-img',
           '.second-img',
           '.third-img',
           '.4th-img',
           '.5th-img',
           '.6th-img',
           '.7th-img',
           '.8th-img'
       ],
       desIndex:3
   });
    $('.btn').click(function(){
        $('.btn').marquee('start');
    });
});

Before using the marquee-lottery, you should layout the page first.

First of all,you should know that speed mode only support one, which ease-in-ease-out mode.

ele:The jQuery selector of gift image，its order according to you need order.If you want let second image at the begin of running, you should put it in first index of ele.

maxTime:The max time of the gift image switch.

minTime:The min time of the gift image switch.

desIndex:This param should resolve from server, the gift image stop at desIndex position.

roundTotal:Number of circles for running.In fact, circles is roundTotal + 1.The last of circle will select the desIndex.

finishCallback:This callback is called at the end of running.

delay:Delay the given time to call the finishCallback.

activeClass:When pass the every gift image add the activeClass class.

reduceTimeStep:The time reduce in the speed up.

addTimeStep:The time add in the slow down.

$('#id').marquee('start'); Start marquee right now.

0.1.5 New

You can use the following code to listen the start-marquee-animation or finish-marquee-animation event. $('#id').on('start-marquee-animation') or $('#id').on('start-marquee-animation')

CoderLiu