jquery广告轮换效果

By luo, on 五月 24th, 2010

jquery实现的广告轮换效果运行后再刷新一下新开的页面可看到效果

<!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>Jane shopping</title> <link rel="stylesheet" href="http://www.uedspace.com/zuopin/adslider/style.css" type="text/css" /> <script type="text/javascript" src="http://www.uedspace.com/zuopin/js/jquery.js"></script> <script type="text/javascript" > $(function(){ var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function(){ index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); //滑入停止动画，滑出开始动画. $('.ad').hover(function(){ clearInterval(adTimer); },function(){ adTimer = setInterval(function(){ showImg(index) index++; if(index==len){index=0;} } , 3000); }).trigger("mouseleave"); }) // 通过控制top ，来显示不同的幻灯片 function showImg(index){ var adHeight = $(".ad").height(); $(".slider").stop(true,false).animate({top : -adHeight*index},1000); $(".num li").removeClass("on") .eq(index).addClass("on"); } </script> </head> <body>  <div id="content"> <div class="ad" > <ul class="slider" > <li><img src="http://www.uedspace.com/zuopin/images/1.gif"/></li> <li><img src="http://www.uedspace.com/zuopin/images/2.gif"/></li> <li><img src="http://www.uedspace.com/zuopin/images/3.gif"/></li> <li><img src="http://www.uedspace.com/zuopin/images/4.gif"/></li> <li><img src="http://www.uedspace.com/zuopin/images/5.gif"/></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。

UEDspace

jquery广告轮换效果

1 comment to jquery广告轮换效果

Leave a Reply

最新文章

文章索引模板

最近评论

友情链接

功能

UEDspace

jquery广告轮换效果

1 comment to jquery广告轮换效果

Leave a Reply

最新文章

热门标签

文章索引模板

最近评论

友情链接

功能