有个array数组,一个<div button><ul height=100px;><li> div高度数固定的,在li里面循环输出数组array,假如高度只能显示4个li,其余的不会显示,点击div里面的button可以出现第五个,而第一个li就没了,保正那框只能显示4个,这怎么实现求指点,过程中不会有滚动条的,所以不用overflow:auto,应该是用javascript实现的吧。

解决方案 »

  1.   

    用js改变div的scrollTop来实现,li定高,div也定高
    <style type="text/css">
    div.container{height:80px;width:300px;overflow:hidden;}
    div ul{margin:0px;padding:0px;}
    div li{height:20px;width:100%;overflow:hidden;}
    </style>
    <div class="container" id="dv">
    <ul>
    <li>11111111111</li>
    <li>22222222222</li>
    <li>33333333333</li>
    <li>444444444444</li>
    <li>55555555</li>
    <li>6666666666</li>
    <li>777777777777777777</li></ul></div>
    <input type="button" onclick="move(-1)" value="上一个" />
    <input type="button" onclick="move(1)" value="下一个" />
    <script type="text/javascript">    function move(dir) {
            var dv = document.getElementById('dv');
            dv.scrollTop += dir * 20;
        }
    </script>
      

  2.   

    点击时移除第一个li,再添加一个li就行了吧,简单
    <button type='nutton' onclick="btnclick();">点击</button>
    <ul id='ul1'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul><script>
    function btnclick()
    {
      var ul1=document.getElementById('ul1');
      var lis=ul1.getElementsByTagName("li");
      ul1.removeChild(lis[0]);
      var newli=document.createElement('li');
      newli.innerHTML='5';
      ul1.appendChild(newli);
    }
    </script>
      

  3.   

    <style type="text/css">
    html,body,div,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
    #myTest{width:100px;height:80px;float:left; overflow:hidden; border:1px solid #bfbfbf;}
    #myTest ul{ list-style:none;}
    #myTest ul li{ list-style:none;height:20px;top:0px;}
    </style>
    <script type="text/javascript">
    function scrollUp(){
        var o=document.getElementById("myTest");
        var step=o.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].clientHeight;//获取每次滚动的增量
        o.scrollTop += step;
    }
    </script>
    <div id="myTest">
        <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>
        </ul>
    </div>
    <input type="button" value="滚动" onclick="scrollUp()"/>
      

  4.   

    很简单啊 你可以参考上面的各位高手的 我再给你个思路
    你不是固定了li的个数么 给每个li一个id 比如 "li_0" , "li_1","li_2","li_3"
    点击button的时候就循环输出数据就可以了 不过需要一个参数做记录 idataIndex=0 点击的时候记得++/--