JQuery fade-in and fade-out can automatically switch the magic light plug-in. The prototype is a magic light effect written a few days ago, because a small bug gets stuck for two days, and then clears the previously written code, I have written a new thought.
Usage
1. Introduce the jquery library file and the jquery. ifadeslide. pack. webpage special effect plug-in file (if other js files exist on the page, merge them to reduce http requests), and introduce location customization;
Http://www.bKjia. c0m 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:
Http://www.bKjia. c0m code is as follows:
$ (Function (){
// Sample-a call --- no parameters are input. The default parameters are called.
$ ('Div # slide'). ifadeslide ();
// Call sample-B --- Pass in a new parameter, which overwrites the original parameter. The default value is not used.
$ ('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
});
// Call sample-c --- Pass in a new parameter, which overwrites the original parameter. The default value is not used.
$ ('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
Http://www.bKjia. c0m 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); 1 2