求个JS代码关于滑动门的。由于数据多导航栏溢出，所以求个左右可以滑动的按钮
就比如说，1234567，只展示12345，然后点右边，出现23456,34567,45671，向左点，出现71234，再点，67123，这样的js因为本身已经有样式，所...
就比如说，1234567，只展示12345，然后点右边，出现23456,34567,45671，向左点，出现71234，再点，67123，这样的js
因为本身已经有样式，所以贴原来的样式出来，希望能直接加上去，背景是一个长条图片
<dd><a id="topMenu1" href="index.do?index=1" class="navi_over"><span>xxxx</span></a></dd>
<dd><a id="topMenu2" href="index.do?index=2" ><span>xxxx</span></a></dd>
<dd><a id="topMenu3" href="index.do?index=3" ><span>xxxx</span></a></dd>
<dd><a id="topMenu4" href="index.do?index=4" ><span>xxxx</span></a></dd>
<dd><a id="topMenu5" href="index.do?index=5" ><span>语义xxxxspan></a></dd> 展开
因为本身已经有样式，所以贴原来的样式出来，希望能直接加上去，背景是一个长条图片
<dd><a id="topMenu1" href="index.do?index=1" class="navi_over"><span>xxxx</span></a></dd>
<dd><a id="topMenu2" href="index.do?index=2" ><span>xxxx</span></a></dd>
<dd><a id="topMenu3" href="index.do?index=3" ><span>xxxx</span></a></dd>
<dd><a id="topMenu4" href="index.do?index=4" ><span>xxxx</span></a></dd>
<dd><a id="topMenu5" href="index.do?index=5" ><span>语义xxxxspan></a></dd> 展开
2个回答
展开全部
网上找个无缝滚动的代码. 改改就能实现你所说的效果..
我这些给你写了个类似的代码 但是没有你要求的那种.你看看有没有用吧
<!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> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.main{width:600px;padding: 0 auto;}
.tabs{width:100%;}
.tabs .left{
width:9%;
float:left;
border:1px solid #ddd;
line-height:32px;
}
.tabs .center{
width:80%;
float:left;
border:1px solid #ddd;
overflow:hidden;
height:32px;
line-height:32px;
}
.tabs .center .tab{
width:12%;
float:left;
border:1px solid #ddd;
display:inline-block;
line-height:32px;
}
.tabs .center .hide{
display:none;
}
.tabs .right{
width:10%;
float:right;
border:1px solid #ddd;
line-height:32px;
}
</style>
<script src ="jquery.min.js"></script>
<script>
$("document").ready(function(){
$(".tabs").each(function(){
var _this =$(this);
$(this).find(".left").click(function(){
var tabs=$(".center>.hide");
if(tabs.length>0)
{
tabs.last().removeClass("hide");
}
});
$(this).find(".right").click(function(){
var center=_this.find(".center");
var tabs=center.children();
var first=null;
tabs.each(function(){
if($(this).attr("class").indexOf("hide")>0)
{
first=$(this);
}
})
if(first==null)
{
tabs.first().addClass("hide");;
}
else
{
first.next().addClass("hide");
}
});
})
})
</script>
</head>
<body>
<div class="main">
<div class="tabs">
<div class=" left "><<</div>
<div class="center">
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
<div class="tab">7</div>
<div class="tab">8</div>
<div class="tab">9</div>
<div class="tab">10</div>
</div>
<div class=" right">>></div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
