The example of this paper describes the implementation of the image slide flicker switching of jquery fading fade. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery Fading fade image slide blink switching effect </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<!--Add the following code to <style type= "Text/css" >
body{font-size:12px;letter-spacing:1px;font-family: "Microsoft Yahei"; line-height:1.8em;}
div,ul,li{margin:0;padding:0;}
. slides{position:relative;width:700px;height:300px;overflow:hidden;border:1px solid #ccc;}
. slides img{width:700px; height:300px;}
. Slides. Ico{position:absolute; right:8px;bottom:6px;}
. Slides. 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;}
. Slides. ico li.high{background: #7f0019; color: #fff; font-weight:bolder;}
</style>
<script language= "javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script language= "JavaScript" >
$ (function () {
var _img=$ ('. Slides img ');
var _len=_img.length;
var _index=0;
var _moving;
Insert Picture index number
var _ul= ' <ul> '
for (var i=1; i<=_len; i++) {
_ul=_ul+ ' <li> ' +i+ ' </li> ';
}
_ul=_ul+ ' </ul> ';
$ (' Div.ico '). Append (_ul);
var _ico=$ ('. ico Li ');
Across numbers
_ico.mouseover (function () {
_index=_ico.index (this);
_img.filter (': Visible '). Fadeout (300,function () {
_img.eq (_index). FadeIn (300);
})
$ (this). AddClass ("High"). Siblings (). Removeclass (' High ');
). EQ (0). MouseOver ();
Auto Gradient
_moving=setinterval (autoshow,2000);
_img.hover (function () {clearinterval (_moving)},function () {
_moving=setinterval (autoshow,2000);
})
function AutoShow () {
_index++;
if (_index==_len) _index=0;
_ico.eq (_index). Trigger (' mouseover ');
};
});
</script>
<body>
Preview the effect of the bottom left corner will be prompted with errors, and can not see the effect, refresh to see the effect of, of course, in the actual use, there will not be such a problem. <br>
<!--Add the following code to <body> and </body>-->
<div class= "Slides" >
<div class= "ico" ></div>
</div>
</body>
I hope this article will help you with your jquery programming.
