jquery文字切换插件头条标题新闻文字切换



148 588 197



特效描述:文字切换插件 头条标题新闻 文字切换,

代码结构

1. 引入CSS

<link href="css/css.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>

3. HTML代码

<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.lanrentuku.com/">
			标题2标题2标题2标题2标题2标题2标题2标题2.
			</a>
		</li>
		<li>
			<span>2008-04-09</span>
			<a href="http://www.lanrentuku.com/">
			标题3标题3标题3标题3标题3标题3标题3标题3.
			</a>
		</li>
		<li>
			<span>2008-03-20</span>
			<a  href="http://www.lanrentuku.com/">
			标题4标题4标题4标题4标题4标题4标题4标题4.
			</a> 
		</li>
		<li>
			<span>2008-03-20</span>
			<a  href="http://www.lanrentuku.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.lanrentuku.com/">
			标题2标题2标题2标题2标题2标题2标题2标题2.
			</a>
		</li>
		<li>
			<span>2008-04-09</span>
			<a href="http://www.lanrentuku.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.lanrentuku.com/">
			标题2标题2标题2标题2标题2标题2标题2标题2.
			</a>
		</li>
		<li>
			<span>2008-05-04</span>
			<a href="http://www.lanrentuku.com/">
			标题2标题2标题2标题2标题2标题2标题2标题2.
			</a>
		</li>
		<li>
			<span>2008-04-09</span>
			<a href="http://www.lanrentuku.com/">
			标题3标题3标题3标题3标题3标题3标题3标题3.
			</a>
		</li>
	</ul>
	<ol class="activeOL"></ol>
</div>
<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>
<br /><br /><br />
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 文字切换 文字选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到