The following are parameter descriptions:
| 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
Copy codeThe 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 = $ ("<a/>" cmd.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 = $ ("<div/>"). 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 = $ ("<div/>"). 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 = $ ("<div/>" ).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 ++)
{
$ ("<A/>" example .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
Copy codeThe Code is as follows:
<Script src = "js/jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script src = "js/jquery. ImageScroll. js" type = "text/javascript"> </script>
<Style type = "text/css">
<! --
Body {
Font-family: Verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
}
# Scroll {position: relative; width: pixel PX; height: 300px ;}
-->
</Style>
<Div id = "scroll">
<A href = "http://www.baidu.com"> </a>
<A href = "http://www.jb51.net"> </a>
<A href = "http://www.codeplex.com"> </a>
<A href = "http://www.codeproject.com"> </a>
<A href = "http:// SC .jb51.net"> </a>
<A href = "http://s.jb51.net"> </a>
</Div>
<Script>
$ ("# Scroll"). ImageScroll ();
</Script>
-Running result
-Call with Parameters
Copy codeThe Code is as follows:
<Script>
$ ("# Scroll"). ImageScroll ({delay: 500, maskBgColor: "# ff0000 "});
</Script>
-Running result
Summary
It's just a small plug-in. The customization may not be very good. You can check and modify it at will. It seems that IE8 has a small bug. You will fix it later and upload it again. What bugs have you found, please reply and let me know, so that I can fix it in time. If you have any code optimization suggestions, please tell me to help me learn from this new person. =
