返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

文字切换效果

来源：本站原创编辑：admin 时间：2009年02月17日浏览：

<!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" content="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;color:#727272;background-image:url(http://www.wxwdesign.cn/works/slide_txt_bg.jpg);height:24px;}
.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">
/*
power by:http://www.wxwdesign.cn
*/
function getTag(tag){return document.getElementsByTagName(tag)};
//主函数
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=3000; //文字切换的时间间隔
var interv2=10; //文字显示的速度
var w_t=300;  //文字的宽度
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">Loading...</div>
<ul>
<li><a href="http://www.web265.com" target="_blank">站长素材bbbbbbbbbbb</a></li>
<li><a href="http://www.web265.com" target="_blank">站长素材aaaaaa</a></li>
<li>分享两款JavaScript版本的音乐播放器(带歌词)</li>
<li><span class="c1">一些CSS3标签选择器对照表</span></li>
</ul>
</div>
</body>
</html>本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：让焦点自动跳转,类似于填写IP

下一篇：支持区号输入的省市二级联动下拉菜单(12K)

赞助商友情链接

站长常用工具

更多

返回首页

文字切换效果

赞助商友情链接

站长常用工具

相关文章