Thinking is a very strange thing, once into a corner, it is difficult to escape. Only by cooling some time, completely put aside the old thinking, can find a new way out.
In fact, is a slide effect, taking into account the ease of use, packaged into a plug-in.
Plug-in features
1. parameter height customization;
2. Can be repeatedly invoked and not affected;
3. Small plug-in files, compressed only 1.04k, development version of 3.29k.
Demo and download
Click here to view demo
Click here to download the plugin
How to use
1. The introduction of jquery library files and JQuery.iFadeSlide.pack.js plug-in files (if the page has other JS files, can be merged with to reduce the HTTP request), the introduction of position customization;
Copy Code code 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:
Copy Code code 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
Copy Code code 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);
var ico = iset.icocon.find (' li '); Indexed List Collection
var size = Iset.field.size (); Toggle Element Amount
var index = 0; Initial index value
var clearfun=null;
Fade Fade in function
var fadefun = function (obj) {
index = Ico.index (obj); Take the current index value
Fades the currently visible element and finds the element to fade in by index value
Iset.field.filter (': Visible '). fadeout (Iset.outtime, function () {
Iset.field.eq (Index). FadeIn (Iset.intime);
});
Add a highlight style to the current index and remove the highlight style from the sibling element
$ (obj). addclass (ISET.HOVERCLS). Siblings (). Removeclass (ISET.HOVERCLS);
};
switching functions
var changefun = function () {
index++; Cumulative index value
if (index = = size) {index = 0}; Initialized to 0 when the index value equals the amount of toggle elements
Ico.eq (index). Trigger (' MouseLeave '); Emulates the mouse for the current index area event
};
Auto Switch function
var scrollfun = function () {
Clearfun = setinterval (function () {
Changefun ()
}, Iset.interval);
};
Stop automatic switching functions
var stopfun = function () {
Clearinterval (Clearfun);
};
Scrollfun (); Initial automatic switching
Index area mouse to stop automatically switch and toggle elements to the current index, the mouse to draw the initialization index to the current value (otherwise the mouse will be out of the chaos)
Ico.hover (function () {
Stopfun ();
Fadefun (this);
}, function () {
Fadefun (this);
). EQ (iset.curindex). MouseLeave (); Initial highlighted index value
Toggle the area mouse to stop automatically switch, underline continue automatic
Iset.field.hover (function () {
Stopfun ();
}, function () {
Scrollfun ();
});
}
});
}) (JQuery);
