Jssor.Slider 19.0 API

详见：http://www.jssor.com/development/reference-api.html/

Methods

//Constructor   e.g. var slider1 = new $JssorSlider$("slider1_container");
$JssorSlider$(container)                //Constructor
$JssorSlider$(container, options)       //Constructor
//Member Methods   e.g. slider1.$Play();
$Play()
//Start auto play if the slider is currently paused
$Pause()
//Pause the slider, prevent it from auto playing
$PlayTo(slideIndex[, slideDuration])
//Play slider to position 'slideIndex' within a period calculated base on 'slideDuration'
$GoTo(slideIndex)
//Go to the specifed slide immediately with no play
$Next()
//Play the slider to next slide
$Prev()
//Play the slider to previous slide                            
$ScaleWidth()
//Retrieve scaled width the slider currently displays
$ScaleWidth(width)
//Scale the slider to new width and keep aspect ratio
$ScaleHeight()
//Retrieve scaled height the slider currently displays                            
$ScaleHeight(height)
//Scale the slider to new height and keep aspect ratio
$OriginalWidth()
//Retrieve original width of the slider
$OriginalHeight()
//Retrieve original height of the slider
$SetSlideshowTransitions(transitions)
//Reset slideshow transitions for the slider
$SetCaptionTransitions(transitions)
//Reset caption transitions for the slider
$SlidesCount()
//Retrieve slides count of the slider
$CurrentIndex()
//Retrieve current slide index of the slider
$IsAutoPlaying()
//Retrieve auto play status of the slider
$IsDragging()
//Retrieve drag status of the slider
$IsSliding()
//Retrieve right<-->left sliding status of the slider
$IsMouseOver()
//Retrieve mouse over status of the slider
$LastDragSucceded()
//Retrieve last drag succeded status, returns 0 if failed, returns drag offset if succeded
                            
$SetScaleWidth(width)  //obsolete, use $ScaleWidth instead                            
$GetScaleWidth()       //obsolete, use $ScaleWidth instead                            
$GetScaleHeight()      //obsolete, use $ScaleHeight instead                            
$GetOriginalWidth()    //obsolete, use $OriginalWidth instead                            
$GetOriginalHeight()   //obsolete, use $OriginalHeight instead
                            

Ad

Properties

//e.g. var htmlElement = slider1.$Elmt;
$Elmt
//the html dom element of the slider
                            

Events

//e.g. jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){});
//$EVT_CLICK            function(slideIndex[, event])
//$EVT_DRAG_START       function(position[, virtualPosition, event])
//$EVT_DRAG_END         function(position, startPosition[, virtualPosition, virtualStartPosition, event])
//$EVT_SWIPE_START      function(position[, virtualPosition])
//$EVT_SWIPE_END        function(position[, virtualPosition])
//$EVT_LOAD_START       function(slideIndex)
//$EVT_LOAD_END         function(slideIndex)
//$EVT_POSITION_CHANGE  function(position, fromPosition[, virtualPosition, virtualFromPosition])
//$EVT_PARK             function(slideIndex, fromIndex)
//$EVT_PROGRESS_CHANGE  function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_STATE_CHANGE     function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_ROLLBACK_START   function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_ROLLBACK_END     function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_SLIDESHOW_START  function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
//$EVT_SLIDESHOW_END    function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
//$JssorSlider$.$EVT_CLICK
function(slideIndex[, event])
{
    //slideIndex: the index of slide which is clicked
    //event: native event fired by browser
}
//$JssorSlider$.$EVT_DRAG_START
function(position[, virtualPosition, event])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
    //event: native event fired by browser
}
//$JssorSlider$.$EVT_DRAG_END
function(position[, virtualPosition, startPosition, virtualStartPosition, event])
{
    //position: real position of the carousel
    //startPosition: real position that drag starts at
    //virtualPosition: virtual position of the carousel
    //virtualStartPosition; virtual position that drag starts at
    //event: native event fired by browser
}
//$JssorSlider$.$EVT_SWIPE_START
function(position[, virtualPosition])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
}
//$JssorSlider$.$EVT_SWIPE_END
function(position[, virtualPosition])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
}
//$JssorSlider$.$EVT_LOAD_START
function(slideIndex)
{
    //fires before image load
    //slideIndex: the index of slide
}
//$JssorSlider$.$EVT_LOAD_END
function(slideIndex)
{
    //fires after image load
    //slideIndex: the index of slide
}
//$JssorSlider$.$EVT_POSITION_CHANGE
function(position, fromPosition[, virtualPosition, virtualFromPosition])
{
    //continuously fires while carousel sliding
    //position: current position of the carousel
    //fromPosition: previous position of the carousel
    //virtualPosition: current virtual position of the carousel
    //virtualFromPosition: previous virtual position of the carousel
}
//$JssorSlider$.$EVT_PARK
function(slideIndex, fromIndex)
{
    //fires when carousel stopped sliding and slides park in correct position
    //slideIndex: the index of current slide
    //fromIndex: the index of previous slide
}
//$JssorSlider$.$EVT_STATE_CHANGE
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //given a slide parked, the life cycle of current slide is as below,
    progressBegin --> idleBegin --> idleEnd --> progressEnd
    //this event fires at any state of
    'progressBegin', 'idleBegin', 'idleEnd' and 'progressEnd'
    //slideIndex: the index of slide
    //progress: current time in the whole process
    //progressBegin: the begining of the whole process
        (generally, captions start to play in)
    //idleBegin: captions played in and become idle, will wait for a period
        which is specified by option '$Idle'
    //idleEnd: the waiting time is over, captions start to play out
    //progressEnd: the whole process is complete
        
    //tipical usage
    if(progress == progressEnd)
    {
        //the animation of current slide is complete
    }
    else if(progress == idleEnd)
    {
        //the idle period of current slide is over
    }
    else if(progress == idleBegin)
    {
        //current slide become idle
    }
    else if(progress == progressBegin)
    {
        //the animation of current slide is at the beginning
    }
    else
    {
        //the animation of current slide is aborted,
            the progress value is negative only in this case
        var realProgress = -progress - 1;
    }
}
//$JssorSlider$.$EVT_PROGRESS_CHANGE
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //this event continuously fires within the process of current slide
    //tipical usage
    var progressString = progress / progressEnd * 100 + "%";
}
//$JssorSlider$.$EVT_ROLLBACK_START
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //when mousedown/touch while captions are playing out,
        the process will start to rollback, this event fires when rollback begin
}
//$JssorSlider$.$EVT_ROLLBACK_END
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //when mousedown/touch while captions are playing out,
        the process will start to rollback, this event fires when rollback end
}
//$JssorSlider$.$EVT_SLIDESHOW_START
function(slideIndex, progress[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
{
    //within the whole process of a slide, there maybe slideshow to run
    //this event fires when slideshow begin
}
//$JssorSlider$.$EVT_SLIDESHOW_END
function(slideIndex, progress[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
{
    //within the whole process of a slide, there maybe slideshow to run
    //this event fires when slideshow end
}