这款经典的选项卡切换特效兼容各种浏览器，很漂亮的左右按钮选项卡切换特效，用户直接点击箭头切换文章列表显示。
<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>经典实用带左右箭头按钮选项卡切换特效_武鸣人</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;
width:158px;
height:241px;
background:url(/img/20240520_www_wuming_ren_2.gif);
overflow:hidden;
}
#title {
height:17px;
*height:16px;
background:url(/img/20240520_www_wuming_ren_3.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;
width:92px;
}
#tit_l {
float:left;
width: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(/img/20240520_www_wuming_ren_4.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>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<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 src="/img/20240520_www_wuming_ren_5.gif" alt="" /><img src="/img/20240520_www_wuming_ren_6.gif" alt="" /></div>
</div>
<div id="text">
<ul id="c1">
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
<li><a href="#">热门搜索的内容</a></li>
</ul>
<ul id="c2">
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
<li><a href="#">热门体育的内容</a></li>
</ul>
<ul id="c3">
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
<li><a href="#">热门娱乐的内容</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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 = 40;//数值越小，速度越快
var times = new Array(n);
var k = 0;
var l = 0;
yahooo(0);
function yahooo(s)
{
if(k >= num && s > 0)
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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";}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处