jquery fade in and out can automatically switch the slide plugin

jquery fade in and out can automatically switch the slide plugin
1. User quickly across the button does not trigger the mouse event;
2. When the mouse strokes the current picture button does not flicker;
3. Simplify and optimize the code.
Use the method is not detailed, see source code and related notes
$.fn.ifadeslide = function (Iset) {
/*
* Iset Optional parameter description:
* Picture set in iset.field==> slide area
* iset.ico==> Button Hook
* iset.high==> Button Highlight style
* Iset.interval==> Picture Switching time
* Iset.leavetime==> does not trigger the maximum time value of the mouse stroke event
* Iset.fadeintime==> fade in time
* Iset.fadeouttime==> Fade time
* Mode of Invocation $ (document). ifadeslide ({field: ' ... ', ico: ' ... ',...})
*/
Iset = $.extend ({High: ' High ', interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
var Imgfield = $ (Iset.field | | ' #slide >img ');
var Icofield = $ (Iset.ico | | ' #ico ');
var curindex = 0;
var slideinterval = Iset.interval | | 3000;
var hovertime = Iset.leavetime | | 150;
var fadeouttime = Iset.fadeouttime | | 400;
var fadeintime = Iset.fadeintime | | 400;
var icos=null, fasthoverfun = null, Autoslidefun = NULL, HASICOHIGHCLS = null, Changefun = Null,max=null;;
var icohtml = ' <ul> ';
Max=imgfield.size ();
Press the picture to pass in the corresponding button
Imgfield.each (function (i) {
icohtml + = ' <li> ' + (i + 1) + ' </li> ';
});
icohtml + = ' </ul> ';
Icofield.append (icohtml);
Fade function
Changefun = function (n) {
Imgfield.filter (': Visible '). fadeout (Fadeouttime, function () {
Imgfield.eq (n). Fadein (Fadeintime)
Icos.eq (n). addclass (Iset.high). Siblings (). Removeclass (Iset.high);
});
}
Icos = Icofield.find (' Ul>li ');
Initializes a highlight for the first key
Icos.first (). addclass (Iset.high);
button mouse to underline event
Icos.hover (function () {
Clearinterval (Autoslidefun);
Curindex = Icos.index (this);
Hasicohighname = $ (this). Hasclass (Iset.high);
SetTimeout to prevent users from fast (unconscious) across the trigger event
Fasthoverfun = settimeout (function () {
Does not blink when the mouse strokes the current picture button
if (!hasicohighname) {
Changefun (Curindex);
}
}, Hovertime);
}, function () {
Cleartimeout (Fasthoverfun);
Automatic switching
Autoslidefun = setinterval (function () {
curindex++;
Changefun (Curindex);
if (Curindex ==max) {
Changefun (0);
Curindex = 0;
}
}, Slideinterval)
). EQ (0). Trigger (' MouseLeave ');

Stop switching when the mouse is drawn into the picture area
Imgfield.hover (function () {
Curindex = Imgfield.index (this);
Clearinterval (Autoslidefun);
}, function () {
Icos.eq (Curindex). Trigger (' MouseLeave ');
});
}

Instance complete code

<style>
. box{width:700px;height:250px}
/*sample-a*/
#slide {position:relative;width:200px; height:250px; overflow:hidden; border:1px solid #ccc; Float:left}
#slide img{width:200px; Height:250px;cursor:pointer}
#slide #ico {position:absolute; right:8px;bottom:6px}
#slide #ico li{background: #fff; float:left;display:block; width:15px; height:15px; line-height:15px;border:1px Solid Cecece;font-family:arial, Helvetica, sans-serif;text-align:center;margin:2px; Padding:1px;cursor:pointer}
#slide #ico li.high{background: #047; color: #fff; Font-weight:bolder}
/*sample-b*/
#slide_b {position:relative;width:460px; height:250px; overflow:hidden; border:1px solid #ccc; Float:right}
#slide_b img{width:460px; height:250px}
#slide_b. Ico_b{position:absolute right:8px;bottom:6px}
#slide_b. Ico_b li{background: #fff; float:left;display:block; width:15px; height:15px; line-height:15px;border:1px Solid #cecece; font-family:arial, Helvetica, sans-serif;text-align:center;margin:2px; Padding:1px;cursor:pointer}
#slide_b. Ico_b li.high_b{background: #a40000; color: #fff; Font-weight:bolder}
/*sample-c*/
#slide_c {position:relative;width:700px; height:250px; overflow:hidden; border:1px solid #ccc; margin-top:20px;}
#slide_c img{width:700px; height:250px}
#slide_c. Ico_c{position:absolute right:8px;bottom:6px}
#slide_c. Ico_c li{background: #fff; float:left;display:block; width:15px; height:15px; line-height:15px;border:1px Solid #cecece; font-family:arial, Helvetica, sans-serif;text-align:center;margin:2px; Padding:1px;cursor:pointer}
#slide_c. Ico_c li.high{background: #000; color: #fff; Font-weight:bolder}
</style>

jquery Code

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script>
/*******************************
* @ A slideshow plugin that can be automatically switched based on jquery fading
* @jquery vesion:1.4.2
* @plugin page:http://mrthink.net/jq-plugin-ifadeslide/
* @author Mr.think
* @author Blog http://mrthink.net/
* @creation date:2011.01.11
*******************************/
$.fn.ifadeslide = function (Iset) {
/*
* Iset Optional parameter description:
* Picture set in iset.field==> slide area
* iset.ico==> Button Hook
* iset.high==> Button Highlight style
* Iset.interval==> Picture Switching time
* Iset.leavetime==> does not trigger the maximum time value of the mouse stroke event
* Iset.fadeintime==> fade in time
* Iset.fadeouttime==> Fade time
* Mode of Invocation $ (document). ifadeslide ({field: ' ... ', ico: ' ... ',...})
*/
Iset = $.extend ({High: ' High ', interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
var Imgfield = $ (Iset.field | | ' #slide >img ');
var Icofield = $ (Iset.ico | | ' #ico ');
var curindex = 0;
var slideinterval = Iset.interval | | 3000;
var hovertime = Iset.leavetime | | 150;
var fadeouttime = Iset.fadeouttime | | 400;
var fadeintime = Iset.fadeintime | | 400;
var icos=null, fasthoverfun = null, Autoslidefun = NULL, HASICOHIGHCLS = null, Changefun = Null,max=null;;
var icohtml = ' <ul> ';
Max=imgfield.size ();
Press the picture to pass in the corresponding button
Imgfield.each (function (i) {
icohtml + = ' <li> ' + (i + 1) + ' </li> ';
});
icohtml + = ' </ul> ';
Icofield.append (icohtml);
Fade function
Changefun = function (n) {
Imgfield.filter (': Visible '). fadeout (Fadeouttime, function () {
Imgfield.eq (n). Fadein (Fadeintime)
Icos.eq (n). addclass (Iset.high). Siblings (). Removeclass (Iset.high);
});
}
Icos = Icofield.find (' Ul>li ');
Initializes a highlight for the first key
Icos.first (). addclass (Iset.high);
button mouse to underline event
Icos.hover (function () {
Clearinterval (Autoslidefun);
Curindex = Icos.index (this);
Hasicohighname = $ (this). Hasclass (Iset.high);
SetTimeout to prevent users from fast (unconscious) across the trigger event
Fasthoverfun = settimeout (function () {
Does not blink when the mouse strokes the current picture button
if (!hasicohighname) {
Changefun (Curindex);
}
}, Hovertime);
}, function () {
Cleartimeout (Fasthoverfun);
Automatic switching
Autoslidefun = setinterval (function () {
curindex++;
Changefun (Curindex);
if (Curindex ==max) {
Changefun (0);
Curindex = 0;
}
}, Slideinterval)
). EQ (0). Trigger (' MouseLeave ');

Stop switching when the mouse is drawn into the picture area
Imgfield.hover (function () {
Curindex = Imgfield.index (this);
Clearinterval (Autoslidefun);
}, function () {
Icos.eq (Curindex). Trigger (' MouseLeave ');
});
}

$ (function () {
Sample-a
$ (document). Ifadeslide ();

Sample-b
$ (document). Ifadeslide ({
Field: $ (' Div#slide_b a '),
ico:$ (' Div.ico_b '),
High: ' High_b ',
interval:2000
});

Sample-c
$ (document). Ifadeslide ({
Field: $ (' div#slide_c img '),
ICO: $ (' Div.ico_c '),
FADEOUTTIME:100,
fadeintime:200
});
});
</script>

HTML code

<div id= "Demo" >
<div class= "box" >
<!--sample-a-->
<div id= "Slide" >



<div id= "ico" ></div>
</div>
<!--sample-a end-->
<!--sample-b-->
<div id= "Slide_b" >
<a href= "http://mrthink.net/sitemap/" ></a>
<a href= "http://mrthink.net/sitemap/" ></a>
<a href= "http://mrthink.net/sitemap/" ></a>
<a href= "http://mrthink.net/sitemap/" ></a>
<div class= "Ico_b" ></div>
</div>
<!--sample-b end-->
</div>
<!--sample-c-->
<div id= "Slide_c" >





<div class= "Ico_c" ></div>
</div>
<!--sample-c end-->
</div>