JQuery a picture switch plugin _jquery

The following is a description of the parameter:

Parameter name	Description
Delay	Picture switching speed, unit milliseconds
Maskopacity	Matte layer transparency, 1 is opaque, 0 is fully transparent
Numopacity	Digital button transparency, 1 opaque, 0 full transparent
Maskbgcolor	Mask Layer Background color
TextColor	Title Font Color
Numcolor	Number button Font Color
Numbgcolor	Number button Background color
Altercolor	Number button Check Font color
Alterbgcolor	Number button Check background color

Plug-in code and call
-Plugin Name: Imagescroll

Copy Code code 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 = $ (this). CSS ("display", "none");
var _links = [], _texts = [], _urls = [];
var _list = _this.find ("a");
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/>"). 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": O ptions.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.textcolor}). html (_texts[0]). Appendto (_this);
for (var i = 0; i < _numcount; i++)
{
$ ("<a/>"). HTML (i+1)
. css ({"float": "Left", "width": "20px", "height": "20px", "Text-align": "Center", "Background-color": O Ptions.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 ("a");
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);

-Calling Code

Copy Code code 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:450px; 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>

-Run Results

-Called with parameters

Copy Code code as follows:

<script>
$ ("#scroll"). Imagescroll ({delay:500, Maskbgcolor: "#ff0000"});
</script>

-Run Results

Summary
It's just a widget, and customization may not be very good, everyone casually look and modify well, seemingly IE8 seems to have a small bug, one will be amended to upload, we have what bugs found, please reply to tell me, to facilitate my timely correction, have the code on the optimization advice, please tell me, help me this new learner, =.=