以下是 AJAX滚动新闻展示效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为AJAX" />
<title>AJAX</title>
<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="#/">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="#/">
标题3标题3标题3标题3标题3标题3标题3标题3.
</a>
</li>
<li>
<span>2008-03-20</span>
<a href="#/">
标题4标题4标题4标题4标题4标题4标题4标题4.
</a>
</li>
<li>
<span>2008-03-20</span>
<a href="#/">
标题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="#/">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="#/">
标题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="#/">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-05-04</span>
<a href="#/">
标题2标题2标题2标题2标题2标题2标题2标题2.
</a>
</li>
<li>
<span>2008-04-09</span>
<a href="#/">
标题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>
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">
var s=new scrollNews("#haha1","s", 1000 , 3);
var s2=new scrollNews("#haha2","s2" , 2000);
</pre>
</div>
</body>
</html>CSS代码(css.css):
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(../images/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(../images/switcher.gif) 0px -10px}
.news ol li A:hover{BACKGROUND:url(../images/switcher.gif) 0px 10px}
.news ol li A.active{BACKGROUND:url(../images/switcher.gif) 0px 0px}
.news ol li A.active:hover{BACKGROUND:url(../images/switcher.gif) 0px 0px}
分享到QQ
分享到微博
微信扫一扫
