首页 新闻 会员 周边

导航栏，带有左右箭头，点击箭头，可以移动导航的栏目，如图所以，求大神赐教

0
悬赏园豆：200 [已解决问题] 解决于 2017-01-05 13:40

导航栏有左右两个箭头，导航文字较多时，如何点击左右箭头调整文字的位置图片

问题补充：

这种导航怎么做？请问有大神在吗？可否写下完整的代码？
mayan马燕的主页 mayan马燕 | 初学一级 | 园豆：3
提问于：2017-01-04 17:32
< >
分享
最佳答案
0

var ul=document.getElementById('ul1');

var len=ul.getElementByTagName('li');

var prevbtn=document.getElementById('prevbtn');

var nextbtn=document.getElementById('nextbtn');

var width=100;

var num=0;

nextbtn.onclick=function(){

 if(num<len-11){

  num++;

  ul.style.left=-(num*width)+'px';

};

};

 

收获园豆：200
莫璃 | 菜鸟二级 |园豆：402 | 2017-01-04 18:08

我来试试，真心感谢您哦

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

请问怎么换成offsetWidth

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:27

@mayan马燕: for(var i=0;i<len.length;i++){

 len[i].width=len[i].offsetwidth;

}

莫璃 | 园豆：402 (菜鸟二级) | 2017-01-04 18:29

@莫璃: 恩恩，谢谢啦

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:30

@莫璃: 我来试试

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:30

@莫璃: 可否写个完整的例子看看？

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

@莫璃: ul.getElementByTagName is not a function为什么报这种类型的错误？

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

@mayan马燕: var oDiv=document.getElementById('box');
var ul=oDiv.getElementsByTagName('ul')[0];
var aLi=oDiv.getElementsByTagName('li');
var ulWidth=0;
for(var i=0;i<aLi.length;i++){
aLi[i].W=aLi[i].offsetWidth;
ulWidth =aLi[i].offsetWidth+ulWidth;
}
ul.style.width=ulWidth+"px";

莫璃 | 园豆：402 (菜鸟二级) | 2017-01-04 18:56

@莫璃: 貌似可以了，还有小问题，我再改改，不懂得再来请教你

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:58

@莫璃: 他变成了这个样子，我想实现，左边的点击向左按钮，然后右边被隐藏的就出来了一个，左边的第一个就隐藏起来

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 19:03

@莫璃: 在吗？亲

mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 19:39

@mayan马燕: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; padding: 0;}
       #box{ position: relative; width: 500px; overflow: hidden; line-height: 60px; margin: 100px auto; background: #000; padding-bottom: 150px;}
        #box ul li{ float: left; padding: 0 20px; color: #fff; font-size: 16px; list-style: none;}
        #box ul{ position: absolute; left: 0; transition: 1s;}
        input{ position: absolute;left:50px; top:60px;;}
        #rightBtn{ left: 90px;}
    </style>
</head>
<body>

<div id="box">
    <ul>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
    </ul>
    <input  value="向左" id="leftBtn" type="button"/>
    <input  value="向左" id="rightBtn" type="button"/>
</div>
<script>
    var oDiv=document.getElementById('box');
    var ul=oDiv.getElementsByTagName('ul')[0];
    var aLi=oDiv.getElementsByTagName('li');
    var leftBtn=document.getElementById('leftBtn');
    var rightBtn=document.getElementById('rightBtn');
    var ulWidth=0;
    var cc=0;
    var num=0;
    var leftArr=[];

    for(var i=0;i<aLi.length;i++){
         aLi[i].W=aLi[i].offsetWidth;
         ulWidth =aLi[i].offsetWidth+ulWidth;
    }
    function numIndex(){
        var arr=[];
        var bb=0;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            cc=aLi[i].offsetWidth+cc;
            if(cc>500){
                bb=cc-500;
                arr.push(bb);
            }
        }
        return arr;

    }
    leftArr=numIndex();
    ul.style.width=ulWidth+"px";
    rightBtn.onclick=function(){
        ul.style.left=-leftArr[num]+'px';
        console.log(leftArr[num]);
       ++num;
        if(num>leftArr.length-1){
            alert("最后一个");
            num=leftArr.length-1;
            return;
        }

    };
    leftBtn.onclick=function(){
     --num;
     ul.style.left=-leftArr[num]+'px';
        if(num<0){
            num=0;
            alert("最左边了");
            return;
        }

    }



</script>
</body>
</html>
莫璃 | 园豆：402 (菜鸟二级) | 2017-01-05 10:11
其他回答(5)
0

m没图.

1

吴瑞祥 | 园豆：29449 (高人七级) | 2017-01-04 17:35

您好，我刚刚上传了图片，你刷新一下

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:36

在吗？比较急，能否帮帮忙

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:36

@mayan马燕: 是一个ul.通过js把第一个li拿出来放到最后一个就行了

支持(0) 反对(0) 吴瑞祥 | 园豆：29449 (高人七级) | 2017-01-04 17:47

@吴瑞祥: 可以写段代码给我看看吗？拜托了

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:52

@吴瑞祥: 在吗？亲

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 20:14
0

1.对里面的用transform。
2.里面的绝对定位，跳转left，right等
不要影响到外面的就好

赵大仙 | 园豆：206 (菜鸟二级) | 2017-01-04 17:44

可以写段代码给我看看吗？拜托了

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:52

<div ><ul><ul></div>
div 用position：relative  ul用absolute  。点击按钮的时候， ul改变left，right的值。。。。。

支持(0) 反对(0) 赵大仙 | 园豆：206 (菜鸟二级) | 2017-01-04 17:57

@赵大仙: 

<!--导航栏-->
<div class="nav">
<ul>
<li class="qiye"><a href="">企业监管</a></li>
<li class="jishu"><a href="">技术服务机构</a></li>
<li class="yinhuan"><a href="">隐患排查</a></li>
<li class="xingzheng"><a href="">行政执法</a></li>
<li class="zhengfu"><a href="">政府办公</a></li>
<li class="yingji"><a href="">应急管理</a></li>
<li class="shigu"><a href="">事故快报</a></li>
<li class="luoshi"><a href="">落实企业主体责任</a></li>
<li class="zhishi"><a href="">知识库</a></li>
<li class="xingzhengxuke"><a href="">行政许可</a></li>
<li class="shuju"><a href="">数据挖掘</a></li>
</ul>
</div>

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:59

是不是要用js呀

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:59

@mayan马燕: 对呀，点击事件嘛

支持(0) 反对(0) 赵大仙 | 园豆：206 (菜鸟二级) | 2017-01-04 18:00

@赵大仙: 可不可以写一下代码给我参考一下？您说的我不会做尼

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:01

@mayan马燕: 用了jq没

支持(0) 反对(0) 赵大仙 | 园豆：206 (菜鸟二级) | 2017-01-04 18:05

@赵大仙: 可以引入jQuery，您能写下代码吗？

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:06

@mayan马燕: 定了宽度，超出的隐藏，通过左右箭头，控制宽度内展示的内容对吧。点击一下刚好就跳动一个导航块儿的宽度？html结构包括下按钮的看下呢

支持(0) 反对(0) 赵大仙 | 园豆：206 (菜鸟二级) | 2017-01-04 18:12

@赵大仙: 

<!--导航栏-->
<div class="nav">
<div class="prevbtn">
<img src="img/prevbtn.png" onclick="prevbtn();"/>
</div>
<ul id="ul1">
<li class="qiye"><a href="">企业监管</a></li>
<li class="jishu"><a href="">技术服务机构</a></li>
<li class="yinhuan"><a href="">隐患排查</a></li>
<li class="xingzheng"><a href="">行政执法</a></li>
<li class="zhengfu"><a href="">政府办公</a></li>
<li class="yingji"><a href="">应急管理</a></li>
<li class="shigu"><a href="">事故快报</a></li>
<li class="luoshi"><a href="">落实企业主体责任</a></li>
<li class="zhishi"><a href="">知识库</a></li>
<li class="xingzhengxuke"><a href="">行政许可</a></li>
<li class="shuju"><a href="">数据挖掘</a></li>
<li class="qiye1"><a href="">企业监管1</a></li>
<li class="jishu1"><a href="">技术服务机构1</a></li>
<li class="yinhuan1"><a href="">隐患排查1</a></li>
</ul>
<div class="nextbtn">
<img src="img/nextbtn.png" />
</div>
</div>

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:56
0

 点击箭头的时候改变菜单的定位坐标啊

balahoho | 园豆：2050 (老鸟四级) | 2017-01-04 17:44

可以写段代码给我看看吗？拜托了

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 17:52

@mayan马燕: 以楼上的html结构为例，改变UL的left值，如果导航固定显示8个,然后超过八个点击右边按钮改变ul的left值等于1个LI的宽度.点击一次加一个LI的宽度，代码的思路就是这样了

支持(0) 反对(0) balahoho | 园豆：2050 (老鸟四级) | 2017-01-04 18:03

@balahoho: 您好，可是我的li没有设置宽度，不好设置宽度，因为每一个导航文字的内容不一样，宽度不好确定大小

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:05

@mayan马燕: 那就在改变坐标时手动获取下一个li的宽度

支持(0) 反对(0) balahoho | 园豆：2050 (老鸟四级) | 2017-01-04 18:09

那你只能计算当前LI和下一个LI的大小，然后在移动了，offsetWidth

支持(0) 反对(0) 莫璃 | 园豆：402 (菜鸟二级) | 2017-01-04 18:12

@莫璃: 我来试试，那多出来的li怎么隐藏掉？

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:13

@mayan马燕: UL外面有一定有一个DIV，然后超出隐藏

支持(0) 反对(0) 莫璃 | 园豆：402 (菜鸟二级) | 2017-01-04 18:15

@莫璃: 哦哦哦，我来试试

支持(0) 反对(0) mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 18:15
0

这个要百度的话，应该怎么搜索


mayan马燕 | 园豆：3 (初学一级) | 2017-01-04 20:44

怀疑你会不会结贴？

支持(0) 反对(0) 无影飞絮剑 | 园豆：1155 (小虾三级) | 2017-01-05 09:25
0

https://w.chesudi.com/Online/searchstore.html 参考这个页面

<span class="icon icon-left"></span>
.icon-left::before {
    font-size: .8rem;
    content: "\e61d";
}

.icon {
    font-family: "iconfont" !important;
    font-size: .8rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

 

无影飞絮剑 | 园豆：1155 (小虾三级) | 2017-01-05 09:29

不是这样的，能不能再帮我看看？

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