船长 发表于 2009-02-14 12:01 | 分类：jQuery | 阅读数：294 次
jquery实现的文字推荐广告代码(js+css)，转自cssrain，个人适当修改注释，方便易懂且容易实现，打开页面后刷新一下就可以看到效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>代码预览</title> <style> body {FONT-SIZE: 12px; MARGIN: 50px; TEXT-AliGN: center} img {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px} .news {CLEAR: both; BACKGROUND: url(http://www.songlecn.com/wp-content/supload/2009/02/14/news_bg.gif); WIDTH: 672px; ColOR: #fff; HEIGHT: 26px} .news ul {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; liNE-HEIGHT: 26px; PADDING-TOP: 0px; liST-STYLE-TYPE: none; HEIGHT: 26px} .news ul li {MARGIN: 0px 0px 0px 1em; text-align:left;} .news ul li.active {DISPLAY: block} .news span {BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0.75em; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0.75em 0px 0px; PADDING-TOP: 0px} .news ul A {ColOR: #fff; TEXT-DECORATION: none} .news ul A:hover {TEXT-DECORATION: underline} .news ol {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: -19px 8px 0px 0px; PADDING-TOP: 0px; liST-STYLE-TYPE: none} .news ol li {DISPLAY: inline; MARGIN: 0px 0px 0px 3px; width:10px;} .news ol li A {BACKGROUND: url(http://www.songlecn.com/wp-content/supload/2009/02/14/switcher.gif) 0px -10px} .news ol li A:hover {BACKGROUND: url(http://www.songlecn.com/wp-content/supload/2009/02/14/switcher.gif) 0px 10px} .news ol li A.active {BACKGROUND: url(http://www.songlecn.com/wp-content/supload/2009/02/14/switcher.gif) 0px 0px} .news ol li A.active:hover {BACKGROUND: url(http://www.songlecn.com/wp-content/supload/2009/02/14/switcher.gif) 0px 0px} </style> </head> <body> <div align="center"> 刷新一下看效果 <div class="news" id="haha1"> <ul> <li> <span>2008-05-16</span> 标题1标题1标题1标题1标题1标题1标题1标题1. </li> <li> <span>2008-05-04</span> <a href="http://www.songlecn.com/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li> <li> <span>2008-04-09</span> <a href="http://www.songlecn.com/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li> <li> <span>2008-03-20</span> <a href="http://www.songlecn.com/"> 标题4标题4标题4标题4标题4标题4标题4标题4. </a> </li> <li> <span>2008-03-20</span> <a href="http://www.songlecn.com/"> 标题5标题5标题5标题5标题5标题5标题5标题5. </a> </li> </ul> <ol class="activeOL"></ol> </div> <br /> <div class="news" id="haha2"> <ul> <li> <span>2008-05-16</span> 标题1标题1标题1标题1标题1标题1标题1标题1. </li> <li> <span>2008-05-04</span> <a href="http://www.songlecn.com/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li> <li> <span>2008-04-09</span> <a href="http://www.songlecn.com/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li> <li> <span>2008-03-20</span> <a href="http://www.songlecn.cn/"> 标题4标题4标题4标题4标题4标题4标题4标题4. </a> </li> </ul> <ol class="activeOL"></ol> </div> <br /> <div class="news" id="haha3"> <ul> <li> <span>2008-05-16</span> <a href="http://www.songlecn.com/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li> <li> <span>2008-05-04</span> <a href="http://www.songlecn.com/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li> <li> <span>2008-04-09</span> <a href="http://www.songlecn.com/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li> </ul> <ol class="activeOL"></ol> </div> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js" type="text/javascript"></script> <script> function scrollNews(selector,Entry,time,StartIndex) { var _self=this; this.Selector=selector; this.Entry=Entry; this.time = time; this.i=StartIndex||0; this.Count=$(this.Selector+" ul li").length; $(this.Selector+" ul li").hide();//全部隐藏 $(this.Selector+" ul li").eq(this.i).show();//第i个显示 $(this.Selector).bind("mouseenter",function(){ if(_self.sI){clearInterval(_self.sI);} }).bind("mouseleave",function(){ _self.showIndex(_self.i++); }) /*生成激活OL项目*/ for(var j=0;j<this.Count;j++) $(this.Selector+" .activeOL").append('<li><a onclick="'+this.Entry+'.showIndex('+j+');" href="#"><img src="http://www.songlecn.com/wp-content/supload/2009/02/14//crystal.gif"></a></li>'); $(this.Selector+" ol li a").eq(this.i).addClass("active"); this.sI=setInterval(this.Entry+".showIndex(null)",this.time); this.GetSelector=function(){return this.Selector;} this.showIndex=function(index) { this.i++;//显示下一个 if(this.sI){clearInterval(this.sI);} this.sI=setInterval(this.Entry+".showIndex()",this.time); if (index!=null) { this.i=index; } if(this.i==this.Count) this.i=0; $(this.Selector+" ul li").hide(); $(this.Selector+" ul li").eq(this.i).slideDown(); $(this.Selector+" ol li a").removeClass("active"); $(this.Selector+" ol li a").eq(this.i).addClass("active"); } } var s=new scrollNews("#haha1","s", 1000 , 3); var s2=new scrollNews("#haha2","s2" , 2000); var haha3=new scrollNews("#haha3","haha3" , 3000 , 1); </script> <pre style="width:300px;text-align:left"> /**滚动新闻展示效果 // 参数1：ID // 参数2：实例化对象的名称（跟var 后的相同） // 参数3：间隔时间 // 参数4：初始化时，默认哪个先显示 新增了鼠标滑入，动画停止。 **/ var s=new scrollNews("#haha1","s", 1000 , 3); var s2=new scrollNews("#haha2","s2" , 2000); </pre> </div> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
验证条码： *
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
