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

Thinking is a very strange thing. Once you fall into a dead end, it is difficult to escape. Only by cooling down for some time and completely putting aside the old thinking can you find a new way out.
It is actually a slideshow effect. Considering the convenience of use, It is packaged into a plug-in.

Plug-in features

1. The parameters are highly customized;
2. Can be called repeatedly without any impact;
3. The plug-in file is small, Only 1.04k after compression, development version 3.29k.

Demo and download

Click here to view DEMO
Click here Download the plug-in

Instructions for use
1. Introduce the jQuery library file and jQuery.iFadeSlide.pack.js plug-in file (if the page has other js files, you can merge them with them) To reduce http requests), introduce 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 styles into the project page. Style customization is recommended.
2. Call the plug-in on the page and pass in the parameters of the switching element. If it is empty or does not pass in the parameters, it will be executed according to the default parameters in the plug-in. For example, the following code is the three sets of slide switching calls in the DEMO demonstration:

Copy 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 --- 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
});
}) ;

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

Copy codeThe 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 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);