主要运用了定时器的原理，bind,trigger应用等
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>banner切换实现</title> <styletype="text/css"> /* *@description:banner切换样式 *@author:lanfeng(beryl) *@time:2013-02-26 */ *{margin:0;padding:0;} body{font:12px/1.5Tahoma,'B8BF53',arial,Tahoma,helvetica,sans-serif;color:#333333;background-color:#ffffff;position:relative;} h1,h2,h3,h4,h5,h6{font-size:100%} address,em{font-style:normal;} code,kbd,pre,samp{font-family:couriernew,courier,monospace;} ul,ol{list-style:noneoutsidenone;} fieldset,img{border:0;} img{vertical-align:middle} table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;} input,button,textarea,select{vertical-align:middle;font:100%Helvetica,Arial,sans-serif;color:inherit} .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;} .clearfix{*zoom:1;} .clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;} .d-ftab{width:510px;height:180px;position:relative;margin:100pxauto;} .d-fShowulli{float:left;width:510px;height:180px;} .d-fShow{width:510px;height:180px;overflow:hidden;} .d-fShowimg{width:510px;height:180px;float:left;} .d-fs-control{position:absolute;width:510px;position:absolute;left:0;bottom:0;height:25px;line-height:25px; background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000', EndColorStr='#66000000');} :root.d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000' ,EndColorStr='#66000000')9;} .d-fs-controlul{position:absolute;bottom:3px;right:5px;height:16px;} .d-fs-controlulli{width:16px;height:16px;background:#777675;border-radius:2px2px2px2px;float:left;margin-left:5px; color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter:alpha(opacity=70);opacity:0.7;} .d-fs-controlulli:hover,.d-fs-controlulli.select{background:#ffffff;color:#ff6700;} </style> <scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script> <scripttype="text/javascript"> $(function(){ varwrap=$('.d-ftab'); varimgs=wrap.find('.d-fShowul>li'); varlen=imgs.length; vartabTime=100; varoutTime=4000; varselect='select'; varnum=0; varinterval; vartype='click'; varbtns=wrap.find('.d-fs-controlul>li'); btns.bind(type,function(){ var_this=$(this); _this.addClass('select').siblings().removeClass('select'); num=_this.prevAll().length; imgs.stop().eq(num).fadeTo(tabTime,1); imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime); returnfalse; }).eq(num).trigger(type); varinterFunc=function(){ num=(num+1)%len; btns.eq(num).triggerHandler(type); } wrap.bind('mouseover',function(){ clearInterval(interval); }).bind('mouseout',function(){ interval=setInterval(interFunc,outTime) }) }) </script> </head> <body> <divclass="d-ftab"> <divclass="d-fShow"> <ul> <li> <ahref="#"><imgalt=""src="images/1.jpg"/> </a> </li> <li> <ahref="#"><imgalt=""src="images/2.png"> </a> </li> <li> <ahref="#"><imgalt=""src="images/3.jpg"> </a> </li> <li> <ahref=""><imgalt=""src="images/4.jpg"> </a> </li> <li> <ahref="#"><imgalt=""src="images/5.jpg"> </a> </li> </ul> </div> <divclass="d-fs-control"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <liclass="select">5</li> </ul> </div> </div> </body> </html> 效果如下图：
