0

こんにちは、私は基本的な jQuery スライダーを持っています。矢印を使用してスライドさせたい年数があります。まず、オーバーフローを非表示にしたいのですが、必要に応じて機能していません。

次の行に進むオーバーフローを非表示にすることを期待overflow:hiddenしていまし<ul class="yearslist">たが、これは機能しないようで、代わりに他の li 要素を以下に示します。

いずれにせよ、スライダーが左から右に移動すると、一番上の行の一番下の行に年が表示されません。

これを完全に機能させるための助けがあれば幸いです!

簡単なjsFiddleを作成したか、以下のコードを表示します。

index.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 に答える