/**delta function is to set how the image slide—keep still for a while and move to next picture.
*step function will be called many times until clearInterval() been called
* currentImage * imageWidth is the currentImage position of ul
* delta start from 0 to 1, delta * imageWidth is the pixels that changes
**/<\/span>
<\/span>function<\/span> <\/span>slider<\/span>(<\/span>ul<\/span>)<\/span>{<\/span>
<\/span>animate<\/span>({<\/span>
<\/span>delay<\/span>:<\/span>17<\/span>,<\/span>
<\/span>duration<\/span>:<\/span> <\/span>3000<\/span>,<\/span>
<\/span>delta<\/span>:<\/span>function<\/span>(<\/span>p<\/span>)<\/span>{<\/span>return<\/span> <\/span>Math<\/span>.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> <\/span>-<\/span>1<\/span> <\/span>+<\/span> <\/span>2<\/span> <\/span>*<\/span> <\/span>p<\/span>)}<\/span>,<\/span>
<\/span>step<\/span>:<\/span>function<\/span>(<\/span>delta<\/span>)<\/span>{<\/span>
<\/span>ul<\/span>.<\/span>style<\/span>.<\/span>left<\/span> <\/span>=<\/span> <\/span>‘<\/span>-<\/span>’<\/span> <\/span>+<\/span> <\/span>parseInt<\/span>(<\/span>currentImage<\/span> <\/span>*<\/span> <\/span>imageWidth<\/span> <\/span>+<\/span> <\/span>delta<\/span> <\/span>*<\/span> <\/span>imageWidth<\/span>)<\/span> <\/span>+<\/span> <\/span>‘<\/span>px<\/span>’<\/span>;<\/span>
<\/span>}<\/span>,<\/span>
<\/span>callback<\/span>:<\/span>function<\/span>(<\/span>)<\/span>{<\/span>
<\/span>currentImage<\/span>++;<\/span>
<\/span>// if it doesn’t slied to the last image, keep sliding<\/span>
<\/span>if<\/span>(<\/span>currentImage<\/span> <\/span><<\/span> <\/span>imageNumber<\/span>-<\/span>1<\/span>)<\/span>{<\/span>
<\/span>slider<\/span>(<\/span>ul<\/span>)<\/span>;<\/span>
<\/span>}<\/span>
<\/span>// if current image it’s the last one, it slides back to the first one<\/span>
<\/span>else<\/span>{<\/span>
<\/span>var<\/span> <\/span>leftPosition<\/span> <\/span>=<\/span> <\/span>(<\/span>imageNumber<\/span> <\/span>-<\/span> <\/span>1<\/span>)<\/span> <\/span>*<\/span> <\/span>imageWidth<\/span>;<\/span>
<\/span>// after 2 seconds, call the goBack function to slide to the first image <\/span>
<\/span>setTimeout<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>goBack<\/span>(<\/span>leftPosition<\/span>)}<\/span>,<\/span>2000<\/span>)<\/span>;<\/span>
<\/span>setTimeout<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>slider<\/span>(<\/span>ul<\/span>)}<\/span>,<\/span> <\/span>4000<\/span>)<\/span>;<\/span>
<\/span>}<\/span>
<\/span>}<\/span>
<\/span>})<\/span>;<\/span>
<\/span>}<\/span><\/pre><\/td>\n<\/tr><\/table>\n\n");