首页 新闻 会员 周边

请问这样的导航条怎么做， 带有左右箭头，点击箭头，隐藏的内容显示出来？

0
[已解决问题] 解决于 2017-01-05 13:39

请问这样的导航条怎么做， 带有左右箭头，点击箭头，隐藏的内容显示出来？

mayan马燕的主页 mayan马燕 | 初学一级 | 园豆：3
提问于：2017-01-04 20:13
< >
分享
最佳答案
0

用js就可以做啊，或者找个插件

奖励园豆：5
大水煮鱼 | 菜鸟二级 |园豆：366 | 2017-01-05 08:41

能不能写份代码，还有什么插件可实现？我从昨天一直搞到现在，都不会，呜呜呜

mayan马燕 | 园豆：3 (初学一级) | 2017-01-05 08:42

@mayan马燕: 你是啥不会啊？是css不会啊还是js不会啊，是不会做箭头啊还是不会让它隐藏啊？它内容是怎么隐藏的啊，还是像轮播图一样啊？箭头css就可以实现了吧，隐藏用js改变它的样式display：none,或者visibility:hidden;

大水煮鱼 | 园豆：366 (菜鸟二级) | 2017-01-05 09:18

@此生唯伊: 我想实现的效果是，点击一下左边的箭头，那么右边的那个被隐藏的li就出来一个，那么左边第一个就隐藏起来，就是12345显示，678隐藏，然后点击一下左箭头，就是23456，是这样的

mayan马燕 | 园豆：3 (初学一级) | 2017-01-05 09:38

@mayan马燕: 你那是轮播图的效果

大水煮鱼 | 园豆：366 (菜鸟二级) | 2017-01-05 11:17

@mayan马燕: 

<html>
<head>

<style>
a{
text-decoration:none;
}

ul li{
display:none;
margin-left:80px;
}

</style>


</head>

<body>






<table style="margin:auto;width:600px;height:300px;border:5px solid red">
<tr>
<td><a href="javascript:void(0)" onclick="zuo1()"><span style="font-size:30px;color:rgb(3,75,117)">&lt</span></a></td>
<td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
</ul>
</td>
<td><a href="javascript:void(0)" onclick="you1()"><span style="font-size:30px;color:rgb(3,75,117)">&gt</span></a></td>
</tr>
</table>
<input type="hidden" value="0" id="jishu"/>

<script>




var ull = document.getElementsByTagName("ul")[0];
var lii = ull.getElementsByTagName("li");
for(var i=3;i>-1;i--){
lii[i].style.display="inline";
}

function you1(){
var ull = document.getElementsByTagName("ul")[0];
var lii = ull.getElementsByTagName("li");
document.getElementById("jishu").value=parseInt(document.getElementById("jishu").value)+1;
var jishu = parseInt(document.getElementById("jishu").value);
if(jishu<=lii.length-4){
lii[jishu-1].style.display="none";
for(var i=jishu;i<=jishu+3;i++){
lii[i].style.display="inline";
}
}else{
document.getElementById("jishu").value=lii.length-4;
}
}


function zuo1(){
var ull = document.getElementsByTagName("ul")[0];
var lii = ull.getElementsByTagName("li");
document.getElementById("jishu").value=parseInt(document.getElementById("jishu").value)-1;
var jishu = parseInt(document.getElementById("jishu").value);
if(jishu>=0){
lii[jishu+4].style.display="none";
for(var i=jishu;i<=jishu+3;i++){
lii[i].style.display="inline";
}
}else{
document.getElementById("jishu").value="0";
}
}



</script>




</body>






</html>
大水煮鱼 | 园豆：366 (菜鸟二级) | 2017-01-05 13:40

@此生唯伊: 谢谢你哦，我也找到了解决办法，待会结合你的，我写成一篇博客，供大家以后参考

mayan马燕 | 园豆：3 (初学一级) | 2017-01-05 13:41

@mayan马燕: 好啊，写好我去瞅瞅，哈哈，用jq的话会更简便一些的，其实方法很多，

大水煮鱼 | 园豆：366 (菜鸟二级) | 2017-01-05 13:45
其他回答(1)
0

请问这是什么导航


mayan马燕 | 园豆：3 (初学一级) | 2017-01-05 00:47
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。