JQuery-based magic light plug-in that can automatically switch between fade-in and fade-out

It is actually a magic lamp effect. Considering its ease of use, it is encapsulated into a plug-in.
Plug-in features
1. Custom parameter height;
2. Repeated calls and no impact;
3. The plug-in file is small. After compression, the file size is only 1.04 kb, and the development version is 3.29 kb.
Demo and download

Usage
1. Introduce the jQuery library file and the jQuery. iFadeSlide. pack. js plug-in file (if there are other js files on the page, merge them to reduce http requests), and introduce location customization;
Copy codeThe Code is as follows:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<Script src = "js/jquery. iFadeSldie. pack. js"> </script>

You do not need to introduce the style file. If you use the structure in the DEMO, you can directly merge the style into the project page. We recommend that you customize the style.
2. call the plug-in on the page and pass in the parameters of the switching element. If the parameters are null or not passed in, they are all executed according to the default parameters in the plug-in. for example, the following code calls three sets of slides in the DEMO:
Copy codeThe Code is as follows:
$ (Function (){
// SAMPLE-A call --- Call the default parameter without passing in any parameters
$ ('Div # slide'). iFadeSlide ();
// SAMPLE-B call --- Pass in the new parameter will overwrite the original parameter, the default value is not passed in
$ ('Div # slide_ B '). iFadeSlide ({
Field: $ ('div # slide_ B '),
Icocon: $ ('div. ico_ B '),
HoverCls: 'High _ B ',
CurIndex: 2, // the index value starts from 0. Therefore, set it to 3rd highlighted items.
Interval: 2000
});
// SAMPLE-C call --- Pass in the new parameter will overwrite the original parameter, the default value is not passed in
$ ('Div # slide_c '). iFadeSlide ({
Field: $ ('div # slide_c img '),
Icocon: $ ('div. ico_c '),
Outgoing time: 100,
InTime: 200.
});
});

Note: The plug-in calling part must be placed after the plug-in file reference.
Core code
Copy codeThe Code is as follows:
; (Function ($ ){
$. Fn. extend ({
IFadeSlide: function (options ){
// Plug-in parameter initialization
Var iset = {
Field: $ ('div # slide img '), // switch Element Set
Icocon: $ ('div. ico '), // index container
HoverCls: 'high', // switch to the current index highlight Style
CurIndex: 0, // the index value highlighted by default. The index value starts from 0.
OutTime: 200, // element fade-out time (MS)
InTime: 300, // elements fade-in time (MS)
Interval: 3000 // Element Switching interval (MS)
};
Options = options | {};
$. Extend (iset, options); // merge parameter objects. If options has a new value, it overwrites the corresponding value in iset. Otherwise, the default value is used.
// Generate the corresponding index value list based on the quantity of switching elements and insert it into the switching Area
Var ulcon = "<ul> ";
Iset. field. each (function (I ){
Ulcon = ulcon + '<li>' + (I + 1) + '</li> ';
});
Ulcon + = '</ul> ';
Iset. icocon. append (ulcon );

Var ico = iset. icocon. find ('lil'); // index list set
Var size = iset. field. size (); // switch the number of elements
Var index = 0; // initial index value
Var clearFun = null;
// Fade out function
Var fadeFun = function (obj ){
Index = ico. index (obj); // obtain the current index value
// Fade out the currently visible element and use the index value to find the element to fade in
Iset. field. filter (': visible'). fadeOut (iset. outTime, function (){
Iset. field. eq (index). fadeIn (iset. inTime );
});
// Add a highlighted style for the current index and remove the highlighted style from the same level element
$ (Obj). addClass (iset. hoverCls). siblings (). removeClass (iset. hoverCls );
};
// Switch the Function
Var changeFun = function (){
Index ++; // The Cumulative index value.
If (index = size) {index = 0}; // when the index value is equal to the number of elements to be switched, the initialization is 0
Ico. eq (index). trigger ('mouseleave '); // simulate a mouse-drawn element area event for the current index
};
// Automatic switch function
Var scrollFun = function (){
ClearFun = setInterval (function (){
ChangeFun ()
}, Iset. interval );
};
// Stop the automatic switch function
Var stopFun = function (){
ClearInterval (clearFun );
};

ScrollFun (); // automatically switches

// In the index area, move the mouse to stop automatic switching and switch the element to the current index. Hover the mouse to initialize the index to the current value (otherwise, the mouse will be messy)
Ico. hover (function (){
StopFun ();
FadeFun (this );
}, Function (){
FadeFun (this );
}). Eq (iset. curIndex). mouseleave (); // the index value that is initially highlighted

// In the switchover area, move the mouse into the area to stop automatic switching.
Iset. field. hover (function (){
StopFun ();
}, Function (){
ScrollFun ();
});
}
});
}) (JQuery );

Others
This plug-in can be used freely, including any form of commercial use, but do not indicate the copyright ownership during use.
You are welcome to raise questions and suggestions, and look forward to extending this plug-in.

Test File packaging download http://xiazai.jb51.net/201008/yuanma/jQuery_iFadeSlide.rar