網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>文本鏈接特效代碼>

可控的JavaScript文字輪番顯示_文本鏈接特效

平滑輪番的JavaScript文字切換，也是相當(dāng)實(shí)用的代碼，網(wǎng)絡(luò)經(jīng)常上見(jiàn)到的功能，一組文字一個(gè)個(gè)交替顯示，靜中透動(dòng)，會(huì)引起人的注意，可以用作廣告、網(wǎng)站公告等方面，而且它是可控的，點(diǎn)擊左右兩端的三角符號(hào)，文字會(huì)上一個(gè)、下一個(gè)輪番。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<style type="text/css" media="all">
body{background-color:#262626;}
.div{width:363px;line-height:26px;font-size:12px;height:auto;overflow:hidden;background-image:url(/jscss/demoimg/200906/txt_bg.jpg);height:23px;}
.div ul{display:none;}
.div2{width:0px;white-space:nowrap;overflow:hidden;float:left;}
.div2 a:link,.div2 a:visited{color:#125B7E;text-decoration:none;}
.div2 a:hover{color:#BF320F;text-decoration:none;}
.left,.right{margin:0px 6px;float:left;width:7px;height:22px;overflow:hidden;cursor:pointer;}
.right{float:right;}
.c1{color:#D10303}
</style>
<script language="javascript" type="text/javascript">
function getTag(tag){return document.getElementsByTagName(tag)};
//主函數(shù)
function slidetext(){
var li=getTag("li");
var container=getTag("div")[0];
var div=document.createElement("div");
var left=document.createElement("div");
var right=document.createElement("div");
var i=0,j=0,timer,timer2,temp=0;
var interv=5000; //切換間隔
var interv2=10; //速度
var w_t=300;  //文字區(qū)域的寬度
left.className="left";
left.title="向前"; //左邊按鈕提示文字
right.title="向后"; //右邊按鈕提示文字
left.onclick=function(){q(-1)};
right.onclick=function(){q(1)};
right.className="right";
container.removeChild(container.firstChild);
container.appendChild(left);
div.className="div2";
container.appendChild(div);
container.appendChild(right);
var s=function(){i+=2;div.style.width=i+"px";div.innerHTML=(j+1)+". "+li[j].innerHTML;temp=j;if(i<w_t){timer2=setTimeout(s,interv2)}else{timer=setTimeout(s,interv);if(j<(li.length-1)){j++;}else{j=0};i=0;}}
var q=function(n){clearTimeout(timer2);clearTimeout(timer);j=temp;if(n<0){if(j>0){j--}else{j=li.length-1}}else{if(j<(li.length-1)){j++;}else{j=0}};i=0;s()}
s();
}
//初始化
window.onload=slidetext;
</script>
<title>文字輪換效果</title>
</head>
<body>
<div class="div"><div class="div2">正在加載中……</div>
<ul>
<li>模板無(wú)憂為您收集精品的網(wǎng)頁(yè)特效</li>
<li>每一款都經(jīng)過(guò)細(xì)心整理</li>
<li>如果您有好的作品，歡迎發(fā)給我們</li>
<li><span class="c1">希望多多支持我們，再見(jiàn)</span></li>
<li>請(qǐng)記住我們吧……</li>
</ul>
</div>
</body>
</html>

所屬頻道：文本鏈接特效/更新時(shí)間：2012-11-30

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)文本鏈接特效：

可控的JavaScript文字輪番顯示_文本鏈接特效

文本鏈接特效Rss訂閱特效代碼搜索

文本鏈接特效推薦

猜你也喜歡看這些