JQuery实现滚动新闻效果，非常实用
第一步：
下载全部源代码
第二步：
在网页<head>区添加以下代码
<link href="css/css.css" rel="stylesheet" type="text/css">
第三步：
在网页<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.sharejs.com">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="http://www.sharejs.com">
标题3标题3标题3标题3标题3标题3标题3标题3.
</a>
</li>
<li>
<span>2008-03-20</span>
<a href="http://www.sharejs.com">
标题4标题4标题4标题4标题4标题4标题4标题4.
</a>
</li>
<li>
<span>2008-03-20</span>
<a href="http://www.sharejs.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.sharejs.com">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="http://www.sharejs.com">
标题3标题3标题3标题3标题3标题3标题3标题3.
</a>
</li>
<li>
<span>2008-03-20</span>
<a href="http://www.lanrentuku.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.sharejs.com">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-05-04</span>
<a href="http://www.sharejs.com">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="http://www.sharejs.com">
标题3标题3标题3标题3标题3标题3标题3标题3.
</a>
</li>
</ul>
<ol class="activeOL"></ol>
</div>
<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script>
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
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>
调用方法：
/**滚动新闻展示效果
// 参数1：ID
// 参数2：实例化对象的名称（跟var 后的相同）
// 参数3：间隔时间
// 参数4：初始化时，默认哪个先显示
新增了鼠标滑入，动画停止。
**/
var s=new scrollNews("#haha1","s", 1000 , 3);
var s2=new scrollNews("#haha2","s2" , 2000);
