0

嗨，我有一个基本的 jQuery 滑块，我想用我的箭头滑过很多年。首先，我希望隐藏任何溢出，这不能按我的要求工作。

我期待overflow:hidden我<ul class="yearslist">隐藏进入下一行的溢出，但这似乎不起作用，而是其他 li 元素如下所示。

无论如何，当滑块从左到右移动时，它不会在顶行的底线上显示年份。

希望能帮助您完美地完成这项工作！

我创建了一个简单的jsFiddle或在下面查看我的代码：

索引.html

<div class="sixteen columns" id="years">
        <div id="years_arrows">
            <span class="nav_arrows" id="NavigateBackward"><img src="http://www.designofsignage.com/application/symbol/building/image/600x600/arrow-left-circle.jpg"/></span>
         <span class="nav_arrows aaa" id="NavigateForward"><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" /></span>
       <div id="slider">
        <div id="yearslistwrapper">
                <ul class="yearslist">
                    <li><a href="#">2003</a></li>
                    <li><a href="#">2004</a></li>
                    <li><a href="#">2004</a></li>
                    <li><a href="#">2005</a></li>
                    <li><a href="#">2006</a></li>
                    <li><a href="#">2007</a></li>
                    <li><a href="#">2008</a></li>
                    <li><a href="#">2009</a></li>
                    <li><a href="#">2010</a></li>
                    <li><a href="#">2011</a></li>
                    <li><a href="#">2012</a></li>                       
                    <li><a href="#">2013</a></li>
                </ul> <!-- END UL yearslist -->
            </div> <!--End slider-->

                            </div> <!-- End years_arrows div -->

样式.css

#years {
    background-color:#CCC;
    height:50px;
    word-spacing:100px;
}

#yearslistwrapper, .yearslist {
    padding-top:10px;
    overflow:hidden;
}

.yearslist {
    overflow:hidden;
    display:inline; 
}

.yearslist li {
 display:inline;   
}
}

.yearslist a {
    color:#000; 
    text-decoration:none;
    cursor:pointer;
    font-size:20px;
    font-weight:bold;
}

.yearslist a:hover {
    text-decoration:underline;
}

/** BG For Span on Nav Arrows **/ 
.nav_arrows { 
    height:100%;
    max-width:5%;
}

#years_arrows {
    width:100%;
    height:100%;
}

#years_arrows img {
    width:50%;
    height:70%;
    padding-top:10px;
}

#NavigateBackward {
    float:left;

}

#NavigateForward {
    float:right;
}

js.js

// SLIDE YEARS

$(document).ready (Initialize);

function Initialize(){
    InitList();
}

var moveLeft = false;
var moveRight = false;

var left = function() {
    if (moveLeft)
        $(".yearslist").animate({ "marginLeft": "-=5px" }, 50, 'linear', left);
};

var right = function() {
    if(moveRight)
        $(".yearslist").animate({ "marginLeft": "+=5px" }, 50, 'linear', right);
};

function InitList() {
    $("span#NavigateBackward").hover(
        function() { moveLeft=true; left(); },
        function() { moveLeft=false; }
    );
    $("span#NavigateForward").hover(
        function() { moveRight=true; right(); },
        function() { moveRight=false; }
    );
}
4

1 回答 1

0

对，我解决了问题。

我所做的是添加 CSS 属性white-space: nowrap;

.yearslist { 溢出：隐藏；显示：内联；空白：nowrap；}

或者查看jsFiddle

于 2013-10-09T14:26:59.593 回答