<%@ page contentType="text/html;charset=UTF-8"%> <div class="grid_8 gridTab"> <!--[banner start]--> <div class="grid_8Img"> <a href="javascript:;"> <img src="da/images/banner300x320_03.jpg" alt="" /> </a> </div> <p class="grid_8Btn"> <a class="active" href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </p> </div> <script type="text/javascript"> /***********************首页 中间banner切换*******************************/ alphaJson={ img : [ 'da/images/banner300x320_01.jpg', 'da/images/banner300x320_02.jpg', 'da/images/banner300x320_03.jpg' ] }; picAlpha($('.grid_8Img'),$('.grid_8Btn a'),$('.grid_8Img img'),alphaJson); function picAlpha(parent,aBtn,oImg,json){ //参数parent:鼠标经过清定时器的元素,参数:aBtn 事件按钮,参数 :oImg 要换的图片 ; 参数json 调用图片的数据 (格式如上) var num=0; var timer=null; aBtn.click(function(){ if($(this).get(0).className=='active') return; num=$(this).index(); alphaShow() }) timer=setInterval(function(){ num++; num%=aBtn.length; alphaShow(); },5000); parent.on('mouseover',function(){ clearInterval(timer); }) parent.on('mouseout',function(){ timer=setInterval(function(){ num++; num%=aBtn.length; alphaShow(); },5000); }) function alphaShow() { aBtn.removeClass(); aBtn.eq(num).addClass('active') oImg.stop(true).animate({ opacity : 0.2 },function(){ oImg.attr('src',json.img[num]); oImg.stop(true).animate({opacity:1}); }); }; }; </script>
?
?