Question

我有一个固定宽度的导航（ul），内容超过了那个宽度。我想添加一个前进和后退按钮来滚动UL中的内容（li） - 看起来很简单，但这似乎不起作用。有什么建议？我想过删除ul / li结构和/或将链接放在一个绝对定位的div中，该容器内有溢出隐藏并滚动绝对定位的内部div的左右坐标点击但看起来似乎也是如此很多标记。

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<style type="text/css">
body {margin:10px; font:10px Arial, Helvetica, sans-serif;}
ul {width:300px; height:20px; float:left; clear:right; display:block; overflow:hidden; padding:0; margin:0}
ul li {display:block; font:16px/20px Arial, Helvetica, sans-serif; float:left; clear:right; list-style:none; margin:0 10px 0 0;}
p {height:20px; float:left; display:block;font:16px/20px Arial, Helvetica, sans-serif; margin:0 10px;}
</style>
</head>

<body>
<p><a href="" id="back">&lt;&lt;</a></p>
<ul>
    <li>first link</li>
    <li>second link</li>
    <li>third link</li>
    <li>fourth link</li>
    <li>fifth link</li>
    <li>sixth link</li>
    <li>seventh link</li>
</ul>
<p><a href="" id="forward">&gt;&gt;</a></p>
<script type="text/javascript">
$(function(){
$("#back").hide();
$("#forward").click(function() {
        $("ul").animate({
            'scrollleft': '150px'
        }, 2000);
});
});

</script>
</body>

</html>

Answer 1

DEMO fiddle

我们可以：

获取最大LI元素的宽度
将该宽度设置为所有LI（和text-align：center）
创建一个溢出：隐藏的DIV容器并放入设置宽度的滑块内以显示3个LI元素。
添加一个计数器 - 始终知道我们在哪里 - 滑动
添加按钮检查功能（删除不需要的按钮）
添加一个功能来制作动画

$(document).ready(function(){

    // get the width of the wider LI and set to all LI elements
    var max = 0;
    $('#slCont ul li').each(function(){
        var this_width = $(this).outerWidth();
        if (this_width > max) {
            max = this_width;
        }
        $(this).width(max);
    });
    $("#slCont ul li").width(max);
    $('#sl, #slCont').width((max*3)+30); // +30 are all the LI margins of 3 images (CSS 5px)
    //////////////////////////////////////////////////////////    
    var galW = $('#slider').width(),
        ulN = $('#slCont ul li').length,
        c = 1;
    $('#slCont').width(galW * ulN);
    function b(){
        cc = (c === 1) ? $('#back').hide() : $('#back').show();
        ccc =(c >= ulN/3) ? $('#forward').hide() : $('#forward').show();    
    }
    b();
    function a(){
        $('#slCont').animate({left: '-'+ galW*(c-1)}, 800);
    }
    $('#forward').click(function() {
        c++; b(); a();
    });
    $('#back').click(function() {
        c--; b(); a();
    });    

});

现在你可以添加任意数量的LI 如果一个LI的文本会更长一些，你甚至不会小心翼翼。

Answer 2

这不是完整的解决方案，但主要的想法是：http://jsfiddle.net/4uymG/16/

当到达边界时，此脚本停止。

$(function(){
    $("#back").hide();
    var menuContainerWidth = parseInt($('#menu-container').outerWidth());
    var menuWidth = parseInt($('ul').outerWidth());

    $("#forward").click(function() {
        $("#back").show();
        var left = $('ul').position().left - 100; 
        if (left <= menuContainerWidth - menuWidth) {
            left = menuContainerWidth - menuWidth;
            $("#forward").hide();
        }
        $("ul").animate({ left: left + 'px' }, 1000);
        return false;
    });

    $("#back").click(function() {
        $("#forward").show();
        var left = $('ul').position().left + 100; 
        if (left >= 0) {
            left = 0;
            $("#back").hide();
        }
        $("ul").animate({ left: left + 'px' }, 1000);
        return false;
    });
});

版本2.0 http://jsfiddle.net/4uymG/41/

使用overflow：hidden在无序列表中滑动导航内容

2 个答案:

DEMO fiddle