jquery轮播小插件--集成css
先上html代码，简单，干净~
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery轮播小插件</title><style type="text/css">*{margin:0; padding:0; list-style:none;}.advPlay_node{width:475px; height:255px; padding:5px; border:1px solid #333; overflow:hidden;}</style></head><body><div alt="jquery轮播小插件-集成css" title="test_01" /></a></li> <li><a href="http://www.souhu.com"><img src="../images/adv_1.jpg" alt="jquery轮播小插件-集成css" title="test_02" /></a></li> <li><a href="http://www.sina.com.cn"><img src="../images/adv_1.jpg" alt="jquery轮播小插件-集成css" title="test_03" /></a></li> <li><a href="http://www.qq.com"><img src="../images/adv_1.jpg" alt="jquery轮播小插件-集成css" title="test_04" /></a></li> </ul> </div></div></div><script type="text/javascript" src="../do/jquery.js"></script><script type="text/javascript" src="JQ.js"></script><script type="text/javascript">$().ready(function(){$('#advPlay').mPicFlash({'state':'left','speed':1000,'title':true});})</script></body></html>?
?
传说中，神秘的JQ.js文件
?
// JavaScript Document$.fn.extend({mPicFlash:function(obj){var _method=this,flash={index:0,state:obj&&obj.state&&obj.state=='top'?'top':'left',speed:obj&&obj.speed&&typeof obj.speed==='number'?obj.speed:3000,title:obj&&obj.title&&obj.title===true?true:false,init:function(){this.width=_method.parent().width();this.height=_method.parent().height();this.length=_method.find('ul li').length;this.change={float:this.state=='left'?'left':'none',ulCss:this.state=='left'?{'width':this.width*this.length,'position':'absolute','z-index':'10'}:{'height':this.height*this.length,'position':'absolute','z-index':'10'}};_method.css({'width':this.width,'height':this.height,'float':'left','overflow':'hidden','position':'relative'}).find('ul,li,img').css({'width':this.width,'height':this.height,'border':'none','float':this.change.float,'overflow':'hidden'});_method.find('ul').css(this.change.ulCss);var html=this.title?'<p style="width:100%; height:28px; background:#000; font-size:14px; line-height:28px; overflow:hidden; padding-left:10px; position:absolute; bottom:0; left:0; z-index:11; filter:alpha(opacity=60); opacity:0.6;"></p>':'';html+='<ol style="height:18px; color:#fff; position:absolute; bottom:5px; right:0; z-index:12; filter:alpha(opacity=60); opacity:0.6;">';for(var i=1;i<=this.length;i++){html+='<li style="width:16px; height:16px; background:#000; cursor:pointer; float:left; line-height:15px; margin:1px 5px 1px 5px; text-align:center;">'+i+'</li>'};_method.append(html+'</ol>');this.picChange();},GO:function(){this.init();this.bindFn();},picChange:function(){_method.find('ol li').eq(this.index).css({'background':'#f00','border':'1px solid #fff','margin':'0 4px 0 4px'}).siblings().css({'background':'#000','border':'0','margin':'1px 5px 1px 5px'});_method.find('ul').stop(true,false).animate(this.state=='left'?{left:-1*this.width*this.index}:{top:-1*this.height*this.index},600);_method.find('p').stop(true,false).fadeTo(300,0,function(){_method.find('p').fadeTo(300,0.6);});_method.find('p').html('<a href="'+_method.find('ul a').eq(this.index).attr('href')+'" style="color:#fff; text-decoration:none;">'+_method.find('ul a img').eq(this.index).attr('title')+'</a>');},bindFn:function(){var method=this;_method.find('ol li').mouseover(function(){if(advPlay){clearInterval(advPlay);}if(method.index==$(this).index()){return false;}method.index=$(this).index();method.picChange();});_method.find('ol li').mouseout(function(){advPlay=setInterval(function(){method.setTimeFn();},method.speed);});var advPlay=setInterval(function(){method.setTimeFn();},method.speed);},setTimeFn:function(){this.index++;if(this.index==this.length){this.index=0;}this.picChange();}};flash.GO();}});