代码简介：
用CSS制作会滚动的选项卡，感觉比较不错，本人很喜欢，运用CSS+JavaScript技术结合，带动画效果的切换，新颖美观，推荐给大家。注意标题的长度，如果太长的话会变成二行，不过用CSS可以隐藏掉，这个问题留给你解决吧。
代码内容：
<!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>
<title>CSS+JSS实现滚动切换的选项【推荐】_网页代码站(www.webdm.cn)</title>
<STYLE>
* {
margin:0;
padding:0;
font-size:12px;
}
img {
border:none;
}
ul,ol {
list-style:none;
}
#content {
margin:20px auto;
border:1px solid #a5b5c0;
188px;
height:241px;
background:url(http://www.webdm.cn/images/20090918/dot.gif);
overflow:hidden;
}
#title {
height:17px;
*height:16px;
background:url(http://www.webdm.cn/images/20090918/dotline.gif) repeat-x;
border-bottom:1px solid #a5b5c0;
padding:3px 0 0 6px;
*padding:4px 0 0 6px;
font-weight:700;
}
#title li {
float:left;
display:inline;
92px;
}
#tit_l {
float:left;
92px;
overflow:hidden;
height:14px;
}
#tit_r {
float:right;
margin-top:-1px;
*margin-top:-2px;
}
#tit_r img {
margin-right:4px;
cursor:pointer;
}
#tit_r img:hover {
filter: Alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#text {
clear:both;
height:210px;
}
#text ul {
background:url(http://www.webdm.cn/images/20090918/dotcount.gif) no-repeat 12px 4px;
margin:6px 0;
}
#text li {
padding-left:34px;
line-height:21px;
}
#text li a {
color:#123b8d;
text-decoration:none;
}
#text li a:hover {
text-decoration:underline;
}
</STYLE>
</head>
<body>
<DIV id=content>
<DIV id=title>
<DIV id=tit_l>
<DIV id=mytit>
<UL>
<LI>最新更新 </LI>
<LI>下载排行 </LI>
<LI>最受关注 </LI></UL></DIV></DIV>
<DIV id=tit_r><IMG alt="" src="http://www.webdm.cn/images/20090918/dotleft.gif"><IMG alt=""
src="http://www.webdm.cn/images/20090918/dotright.gif"></DIV></DIV>
<DIV id=text>
<UL id=c1>
<li><a href="/" target="_blank">VC++实现超酷QQ界面</a></li><li><a href="/" target="_blank">基于C#同步套接字</a></li><li><a href="/"
target="_blank">《网页制作完全手册》 chm</a></li><li><a href="/" target="_blank">VB调用模板进行打印的实例</a></li><li><a href="/"
target="_blank">ASP.net报表设计源码包</a></li><li><a href="/" target="_blank">J2me开发环境的搭建教程</a></li><li><a href="/" target="_blank">
《jQuery in Action》 源代码</a></li><li><a href="/" target="_blank">DCS PHP在线记账/记事本</a></li><li><a href="/" target="_blank">VB打印控件
Listview示例</a></li><li><a href="/" target="_blank">仿支付宝CSS网站导航栏</a></li>
</UL>
<UL id=c2>
<li><a href="/" target="_blank">BICQ 仿QQ聊天系统</a></li>
<li><a href="/" target="_blank">DIV+JS弹出窗口框架</a></li>
<li><a href="/" target="_blank">WindowLite 可拖动提示窗口</a></li><li><a href="/" target="_blank">Asp生成静态完整实例</a></li><li><a href="/"
target="_blank">VC++固定资产管理系统</a></li><li><a href="/" target="_blank">jQuery相册播放插件</a></li><li><a href="/" target="_blank">Ajax拖动
分页插件</a></li><li><a href="/" target="_blank">C#餐饮管理系统</a></li>
<li><a href="/" target="_blank">BICQ 仿QQ聊天系统</a></li>
<li><a href="/" target="_blank">BICQ 仿QQ聊天系统</a></li>
</UL>
<UL id=c3>
<li><a href="/" target="_blank">VC++实现超酷QQ界面</a></li><li><a href="/" target="_blank">基于C#同步套接字</a></li><li><a href="/"
target="_blank">《网页制作完全手册》 chm</a></li><li><a href="/" target="_blank">VB调用模板进行打印的实例</a></li><li><a href="/"
target="_blank">ASP.net报表设计源码包</a></li><li><a href="/" target="_blank">J2me开发环境的搭建教程</a></li><li><a href="/" target="_blank">
《jQuery in Action》 源代码</a></li><li><a href="/" target="_blank">DCS PHP在线记账/记事本</a></li><li><a href="/" target="_blank">VB打印控件
Listview示例</a></li><li><a href="/" target="_blank">仿支付宝CSS网站导航栏</a></li>
</UL></DIV></DIV>
<SCRIPT type=text/javascript>
/** /**/
var myTitle = document.getElementById("mytit");
myTitle.innerHTML += myTitle.innerHTML;
var lists = myTitle.getElementsByTagName("li");
var num = lists.length - 2;
//alert(num)
myTitle.style.width = (num+1) * 92;//计算标题长度
var ele = document.getElementById("tit_l");
var w = ele.clientWidth;
var n = 18;
var t = 38;//数值越小速度越快
var times = new Array(n);
var k = 0;
var l = 0;
yahooo(0);
function yahooo(s)
{
if(k >= num && s > 0)
{
ele.scrollLeft = w;
k = 1;
}
if(k < 1 && s < 0)
{
ele.scrollLeft = (num-1) * w;
k = num-1;
}
k += s;
var x = ele.scrollLeft;
var d = k * w - x;
for(i=0;i<n;i++)
(
function()
{
if(times[i]) {clearTimeout(times[i])} ;
var j = i;
times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
}
)();
}
var imgs = document.getElementById("tit_r").getElementsByTagName("img");
///
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");
imgs[0].onclick = function()
{
yahooo(-1);
if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
imgs[1].onclick = function()
{
yahooo(1);
if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
</SCRIPT>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/e752fb9c-a047-4149-a272-928f22cec7b8.html