<head>
<title>jquery 滚动新闻代码效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb22312" />
<link href="css教程/css.css" rel="stylesheet" type="text/css">
</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.111cn.net/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="http://www.111cn.net/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
<li> <span>2008-03-20</span> <a href="http://www.111cn.net/"> 标题4标题4标题4标题4标题4标题4标题4标题4. </a> </li>
<li> <span>2008-03-20</span> <a href="http://www.111cn.net/"> 标题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.111cn.net/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="http://www.111cn.net/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
<li> <span>2008-03-20</span> <a href="http://www.niutuku.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.111cn.net/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-05-04</span> <a href="http://www.111cn.net/"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="http://www.111cn.net/"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
</ul>
<ol class="activeol">
</ol>
</div>
<script src="jquery-1[1].2.1.pack.js" type="text/网页特效"></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="images/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");
}
}
/**滚动新闻展示效果
code by cssrain--橘子.
转载请注明:http://www.cssrain.cn
// 参数1：id
// 参数2：实例化对象的名称（跟var 后的相同）
// 参数3：间隔时间
// 参数4：初始化时，默认哪个先显示
**/
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>
源码下载
http://down.111cn.net/down/code/js/2010/1009/21118.html