jquery Picture Slide Transition effect code (1/2)

How to use
1. The introduction of jquery library files and jquery.ifadeslide.pack. Web Effects plug-in file (if the page has other JS files, can be merged with to reduce the HTTP request), introduce location customization;
The Http://www.111cn.net 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>

Style files need not be introduced, and if you use the structure in the demo, you can merge the styles directly into the project page. Recommended style customization.
2. Invoke the plug-in in the page and pass in the parameters of the toggle element, if NULL or not passed in parameters, are executed by default parameters in the plug-in. For example, the following code is the three set of slide switch calls in the demo demo:
The Http://www.111cn.net code is as follows:
$ (function () {
The SAMPLE-A call---does not pass in any parameters, calling the default parameter
$ (' div#slide '). Ifadeslide ();
The SAMPLE-B call---Pass in the new parameter, overwriting the original argument and using the default value not passed in
$ (' Div#slide_b '). Ifadeslide ({
Field: $ (' Div#slide_b a '),
icocon:$ (' Div.ico_b '),
Hovercls: ' High_b ',
Curindex:2,//index value 0 start, so set to 3rd highlight
interval:2000
});
The SAMPLE-C call---Pass in the new parameter, overwriting the original argument and using the default value not passed in
$ (' Div#slide_c '). Ifadeslide ({
Field: $ (' div#slide_c img '),
Icocon: $ (' Div.ico_c '),
OUTTIME:100,
intime:200
});
});

Note that the calling plug-in section must be placed behind the plug-in file reference.
Core code
The Http://www.111cn.net code is as follows:
;(function ($) {
$.fn.extend ({
Ifadeslide:function (options) {
Plug-in parameter initialization
var iset={
field:$ (' div#slide img '),//Toggle Element Collection
icocon:$ (' Div.ico '),//Index container
HOVERCLS: ' High ',//switch to current index highlighting style
curindex:0,//default highlighted index value, index value 0 start
outtime:200,//Element fade time (ms)
intime:300,//yuan refined into time (ms)
interval:3000//Element switch interval (ms)
};
options=options | | {};
$.extend (iset,options); Merges the parameter objects. If the options pass in a new value, overwrite the corresponding value in the Iset, otherwise use the default value.
Generates a list of indexed values based on the amount of toggle elements and inserts them into the toggle area
var Ulcon = "<ul>";
Iset.field.each (function (i) {
Ulcon = Ulcon + ' <li> ' + (i + 1) + ' </li> ';
});
Ulcon + = ' </ul> ';
Iset.icocon.append (Ulcon);

Home 1 2 last page