Fade in and out slideshow plug-in with automatic switching based on jQuery_jquery

In fact, it is just a slide show effect. Considering the convenience of use, it is packaged into a plug-in.
Plug-in features
1. Highly customized parameters;
2. Can be called repeatedly without affecting;
3 . The plug-in file is small, only 1.04k after compression, and the development version is 3.29k.
Demo and download

Usage method
1. Introduce jQuery library files and jQuery.iFadeSlide. The pack.js plug-in file (if the page has other js files, it can be merged with it to reduce http requests), introduces location customization;

Copy code The code is as follows:

Style files do not need to be imported, if you use the structure in DEMO , you can directly merge the style into the project page. It is recommended to customize the style.
2. Call the plug-in on the page and pass in the parameters of the switching element. If it is empty or no parameters are passed in, the default in the plug-in will be used. Parameter execution. For example, the following code is the three sets of slide switching calls in the DEMO demonstration:

Copy the code The code is as follows:

$(function(){
//SAMPLE-A call---no parameters are passed in, the default parameters are called
$('div#slide').iFadeSlide();
//SAMPLE-B call---Passing in new parameters will overwrite the original parameters. If not passed in, the default value will be used
$('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 it is set here Highlight the 3rd item
interval: 2000
});
//SAMPLE-C call---passing in new parameters will overwrite the original parameters, and the default value will be used if not passed in
$('div#slide_c').iFadeSlide({
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
});

Note that the plug-in calling part must be placed after the plug-in file reference.
Core Code

Copy code The code is as follows:

;(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 collection
var size = iset.field.size(); //Switch element amount
var index = 0; //Initial index value
var clearFun=null;
//Fade out Fade-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 When the index value is equal to the amount of switched elements, it is initialized to 0
ico.eq(index).trigger('mouseleave'); //Simulate the mouse out element area event 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. Move the mouse out to initialize the index to the current value (otherwise, the switching will be chaotic when the mouse is drawn out)
ico.hover(function(){
stopFun() ;
fadeFun(this);
}, function(){
fadeFun(this);
}).eq(iset.curIndex).mouseleave(); //Initially highlighted Index value

//Switching area stops automatic switching when the mouse is moved in, and continues automatically when drawn out
iset.field.hover(function(){
stopFun();
}, function( ){
scrollFun();
});
}
});
})(jQuery);

Others
This plug-in can Free to use, including any form of commercial use, but please do not indicate copyright ownership when using it.
We welcome questions and suggestions, and look forward to expanding this plug-in.

Test file package downloadhttp ://xiazai.jb51.net/201008/yuanma/jQuery_iFadeSlide.rar