JQuery: a plug-in for image Switching

BS developers often need special effects for switching news images on the homepage. In view of jQuery's good plug-in development mechanism, I often write some practical small plug-ins by myself, here is a news image switching plug-in. The following describes the parameters:

Parameter Name	Description
Delay	Image switching speed, in milliseconds
MaskOpacity	Transparency of the mask layer. 1 indicates opacity and 0 indicates full transparency.
NumOpacity	Number button transparency, 1 is not transparent, 0 is completely transparent
MaskBgColor	Mask Layer background color
TextColor	Title Font color
NumColor	Font color of numeric buttons
NumBgColor	Digital button background color
AlterColor	Font color of the selected item
AlterBgColor	The background color of the selected item.

Plug-in code and call
-Plug-In Name: ImageScroll

The Code is as follows:

(Function ($ ){
$. Fn. ImageScroll = function (options ){
Var defaults = {
Delay: 2000,
MaskOpacity: 0.6,
NumOpacity: 0.6,
MaskBgColor: "#000 ",
TextColor: "# fff ",
NumColor: "# fff ",
NumBgColor: "#000 ",
AlterColor: "# fff ",
AlterBgColor: "#999"
};
Options = $. extend (defaults, options );
Var _ this = publish (this).css ("display", "none ");
Var _ links = [], _ texts = [], _ urls = [];
Var _ list = _ this. find ("");
Var _ timer;
Var _ index = 0;
_ List. each (function (index ){
Var temp = $ (this). find ("img: eq (0 )");
_ Links. push ($ (this). attr ("href "));
_ Texts. push (temp. attr ("alt "));
_ Urls. push (temp. attr ("src "));
});
If (_ list. length <= 0 ){
Return;
}
Else {
_This.html ("");
}
Var _ width = _ this. width ();
Var _ height = _ this. height ();
Var _ numCount = _ list. length;
Var _ numColumn = Math. ceil (_ numCount/2 );
Var _ img = $ ("" detail .css ({"display": "block", "position": "absolute", "top": "0px", "left ": "0px", "z-index": "2", "width": _ width + "px", "height": _ height + "px", "background ": "url (" + _ urls [0] + ")"}). appendTo (_ this );
Var _ mask = $ ("

"). Attr (" style "," opacity: "+ options. maskOpacity)
. Css ({"position": "absolute", "left": "0px", "bottom": "0px", "z-index": "3 ", "width": _ width + "px", "height": "46px", "opacity": options. maskOpacity, "background-color": options. maskBgColor }). appendTo (_ this );
Var _ num = $ ("

"). Attr (" style "," opacity: "+ options. numOpacity)
. Css ({"position": "absolute", "right": "0px", "bottom": "0px", "z-index": "5 ", "width": _ numColumn * 22, "opacity": options. numOpacity, "height": "44px "}). appendTo (_ this );
Var _ text = $ ("

"Mirror.css ({" position ":" absolute "," left ":" 0px "," bottom ":" 0px "," z-index ":" 4 ", "padding-left": "10px", "height": "44px", "line-height": "44px", "color ": options.textcolor00000000.html (_ texts [0]). appendTo (_ this );
For (var I = 0; I <_ numCount; I ++)
{
$ (").Html (I + 1)
. Css ({"float": "left", "width": "20px", "height": "20px", "text-align": "center ", "background-color": options. numBgColor, "margin": "0px 2px 2px 0px", "cursor": "pointer", "line-height": "20px", "color": options. numColor })
. Mouseover (function (){
If (_ timer ){
ClearInterval (_ timer );
}
}). Mouseout (function (){
_ Timer = setInterval (alter, options. delay );
}). Click (function (){
NumClick ($ (this ));
}). AppendTo (_ num );
}
Var _ tempList = _ num. find ("");
Function alter (){
If (_ index> _ numCount-1 ){
_ Index = 0;
}
_ TempList. eq (_ index). click ();
}
Function numClick (obj ){
Var I = _ tempList. index (obj );
_TempList.css ({"background-color": options. numBgColor, "color": options. numColor });
Obj.css ({"background-color": options. alterBgColor, "color": options. alterColor });
_ Img. attr ({"href": _ links [I], "target": "_ blank "})
. Css ({"opacity": "0", "background": "url (" + _ urls [I] + ")"})
. Animate ({"opacity": "1"}, 500 );
_Text.html (_ texts [I]);
_ Index = I + 1;
}
SetTimeout (alter, 10 );
_ Timer = setInterval (alter, options. delay );
_This.css ("display", "block ");
};
}) (JQuery );

-Call Code

The Code is as follows: