jquery渐隐渐显的图片幻灯闪烁切换实现方法
本文实例讲述了jquery渐隐渐显的图片幻灯闪烁切换实现方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery渐隐渐显的图片幻灯闪烁切换效果</title> <metahttp-equiv="content-type"content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <styletype="text/css"> body{font-size:12px;letter-spacing:1px;font-family:"MicrosoftYaHei";line-height:1.8em;} div,ul,li{margin:0;padding:0;} .slides{position:relative;width:700px;height:300px;overflow:hidden;border:1pxsolid#ccc;} .slidesimg{width:700px;height:300px;} .slides.ico{position:absolute;right:8px;bottom:6px;} .slides.icoli{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1pxsolid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:pointer;} .slides.icoli.high{background:#7f0019;color:#fff;font-weight:bolder;} </style> <scriptlanguage="javascript"src="js/jquery-1.4.2.min.js"></script> <scriptlanguage="javascript"> $(function(){ var_img=$('.slidesimg'); var_len=_img.length; var_index=0; var_moving; //插入图片索引数字 var_ul='<ul>' for(vari=1;i<=_len;i++){ _ul=_ul+'<li>'+i+'</li>'; } _ul=_ul+'</ul>'; $('div.ico').append(_ul); var_ico=$('.icoli'); //划过数字 _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(); //自动渐变 _moving=setInterval(autoShow,2000); _img.hover(function(){clearInterval(_moving)},function(){ _moving=setInterval(autoShow,2000); }) functionautoShow(){ _index++; if(_index==_len)_index=0; _ico.eq(_index).trigger('mouseover'); }; }); </script> </head> <body> 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br> <!--把下面代码加到<body>与</body>之间--> <divclass="slides"> <imgsrc="/images/m02.jpg"title="demo"alt="demo"> <imgsrc="/images/m01.jpg"title="demo"alt="demo"> <imgsrc="/images/m03.jpg"title="demo"alt="demo"> <imgsrc="/images/m04.jpg"title="demo"alt="demo"> <imgsrc="/images/m05.jpg"title="demo"alt="demo"> <divclass="ico"></div> </div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。