[Javascript] General websites have special effects on image scrolling. below is the jquery image scrolling plug-in. General websites have special effects on image scrolling. below is the jquery image scrolling plug-in [javascript] viewplaincopyprint? JQuery. fn. imageScrollerfunct... Synt
[Javascript]
The jquery image scrolling plug-in is usually used for websites with special effects of image scrolling between left and right.
The special effects of image Scrolling on websites are as follows: jquery image scrolling plug-in [javascript] view plaincopyprint? JQuery. fn. imageScroller = function (params ){
Var p = params | {
Next: "buttonNext ",
Prev: "buttonPrev ",
Frame: "viewerFrame ",
Scrolltime: 3000,
Width: 100,
Child: "",
Auto: true
};
Var _ btnNext = $ ("#" + p. next );
Var _ btnPrev = $ ("#" + p. prev );
Var _ imgFrame = $ ("#" + p. frame );
Var _ width = p. width;
Var _ height = p. height;
Var _ child = p. child;
Var _ auto = p. auto;
Var _ itv;
Var _ scrolltime = p. scrolltime;
Var _ turndirection = p. turndirection;
Var turnLeft = function (){
_ BtnPrev. unbind ("click", turnLeft );
If (_ auto) autoStop ();
_ ImgFrame. animate ({marginLeft:-_ width}, 'slow', '', function (){
_ ImgFrame. find (_ child + ": first"). appendTo (_ imgFrame );
_ImgFrame.css ("marginLeft", 0 );
_ BtnPrev. bind ("click", turnLeft );
If (_ auto) autoPlay ();
});
};
Var turnRight = function (){
_ BtnNext. unbind ("click", turnRight );
If (_ auto) autoStop ();
_ ImgFrame. find (_ child + ": last"). clone (). show (). prependTo (_ imgFrame );
_ImgFrame.css ("marginLeft",-_ width );
_ ImgFrame. animate ({marginLeft: 0}, 'low', '', function (){
_ ImgFrame. find (_ child + ": last"). remove ();
_ BtnNext. bind ("click", turnRight );
If (_ auto) autoPlay ();
});
};
Var turnTop = function (){
_ BtnPrev. unbind ("click", turnTop );
If (_ auto) autoStop ();
_ ImgFrame. animate ({marginTop:-_ height}, 'slow', '', function (){
_ ImgFrame. find (_ child + ": first"). appendTo (_ imgFrame );
_ImgFrame.css ("marginTop", 0 );
_ BtnPrev. bind ("click", turnTop );
If (_ auto & _ turndirection = 'turntop ') autoTopPlay ();
});
};
_BtnNext.css ("cursor", "hand"). click (turnRight );
_BtnPrev.css ("cursor", "hand"). click (turnLeft );
Var autoPlay = function (){
_ Itv = window. setInterval (turnLeft, _ scrolltime );
};
Var autoTopPlay = function (){
_ Itv = window. setInterval (turnTop, _ scrolltime );
};
Var autoStop = function (){
Window. clearInterval (_ itv );
};
If (_ auto & _ turndirection = 'turntop ')
{
AutoTopPlay ();
}
Else {autoPlay ();}
};
$ (Function ()
{
$ ("# Tjzt"). imageScroller ({
Frame: "tjzt_ul", // div or ul ID
Width: 310, // The width of li
Child: "li", // subproject type
Auto: true, // whether to scroll automatically
Scrolltime: 5000 // interval between scrolling of each image
});
});