首页新闻找找看学习计划

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

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

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

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

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

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

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

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

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

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

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

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

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

大水煮鱼 | 园豆:364 (菜鸟二级) | 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>
大水煮鱼 | 园豆:364 (菜鸟二级) | 2017-01-05 13:40

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

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

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

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

请问这是什么导航


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