jquery文字切換插件頭條標題新聞文字切換



155 618 207



特效描述:文字切換插件 頭條標題新聞 文字切換,

代碼結構

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

加群請備注:從官網了解到

老夫子电子