Fade-in and fade-out slideshow plug-in with automatic switching based on jQuery package download_jquery

$(function(){
//SAMPLE -A call --- no parameters are passed in, the default parameters are called
$('div#slide').iFadeSlide();
//SAMPLE-B call --- new parameters are passed in, the Overwrite the original parameters and use the default value if not passed in
$('div#slide_b').iFadeSlide({
field: $('div#slide_b a'),
icocon:$(' div.ico_b'),
hoverCls: 'high_b',
curIndex: 2, //The index value starts from 0, so the third item is highlighted here
interval: 2000
}) ;
//SAMPLE-C call---Passing in new parameters will overwrite the original parameters. If not passed in, the default value will be used
$('div#slide_c').iFadeSlide({
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
}) ;

;(function($){
$.fn.extend({
iFadeSlide: function(options){
//Plug-in parameter initialization
var iset={
field:$('div#slide img'), //Switch element collection
icocon:$('div.ico'), //Index container
hoverCls:'high', //Switch to current Index highlighting style
curIndex:0, //Default highlighted index value, starting from 0
outTime:200, //Element fade-out time (ms)
inTime:300, //Element fade-in time (ms)
interval:3000 //Element switching interval (ms)
};
options=options || {};
$.extend(iset,options) ; //Merge parameter objects. If there is a new value in options, overwrite the corresponding value in iset, otherwise use the default value.
//Generate a corresponding index value list based on the amount of switching elements and insert it into the switching area
var ulcon = "

";
iset.field.each(function(i){
ulcon = ulcon '
• ' (i 1) '
';
});
ulcon = '

';
iset.icocon.append(ulcon);
var ico = iset.icocon.find('li'); //index list Set
var size = iset.field.size(); //Switch element amount
var index = 0; //Initial index value
var clearFun=null;
//Fade out and in function
var fadeFun = function(obj){
index = ico.index(obj); //Get the current index value
//Fade out the currently visible element and find the element to fade in through the index value
iset.field.filter(':visible').fadeOut(iset.outTime, function(){
iset.field.eq(index).fadeIn(iset.inTime);
});
//Add a highlighting style to the current index and remove the highlighting style in sibling elements
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset.hoverCls);
} ;
//Switch function
var changeFun = function(){
index; //Cumulative index value
if (index == size){index = 0}; //When the index value is equal to When switching the amount of elements, it is initialized to 0
ico.eq(index).trigger('mouseleave'); //Simulate the event of the mouse drawing out the element area for the current index
};
//Automatic switching Function
var scrollFun = function(){
clearFun = setInterval(function(){
changeFun()
}, iset.interval);
};
//Stop automatic Switching function
var stopFun = function(){
clearInterval(clearFun);
};
scrollFun(); //Initial automatic switching
//Swipe the mouse in the index area to stop automatic switching And switch the element to the current index, and the mouse stroke initializes the index to the current value (otherwise the mouse stroke will cause chaos)
ico.hover(function(){
stopFun();
fadeFun(this);
}, function(){
fadeFun(this);
}).eq(iset.curIndex).mouseleave(); //Initial highlighted index value
//Switch area Automatic switching stops when the mouse is moved in, and automatic switching continues when the mouse is moved out.
iset.field.hover(function(){
stopFun();
}, function(){
scrollFun();
});
}
});
})(jQuery);