Jquery горизонтальный слайдер для категорий

Question

Я пытаюсь создать скользящее горизонтальное меню с разными категориями.

Я хотел бы использовать один слой div, имеющий фиксированное значение ширины, и другой div внутри него с большей шириной, чем первый. Таким образом, будет видна только часть этого второго div.

У меня две проблемы:

• HTML-код categorylist не работает должным образом, вместо этого я вижу часть второго div, я вижу все с возвратом каретки.

• Я пытаюсь переместить второй элемент div вправо и влево, когда пользователь наводит указатель мыши на знаки <> с обеих сторон списка категорий.

Не могли бы вы помочь мне, вот мой код:

<div style="overflow: hidden;width: 710px;height: 17px;">
       <div id="CategoryList">
          <span id="NavigateBackward"><</span>
             <p class="MiniCategory" style="display: inline;">Category 1</p>
             <p class="MiniCategory" style="display: inline;">Category 2</p>
             <p class="MiniCategory" style="display: inline;">Category 3</p>
             <p class="MiniCategory" style="display: inline;">Category 4</p>
             <p class="MiniCategory" style="display: inline;">Category 5</p>
             <p class="MiniCategory" style="display: inline;">Category 6</p>
             <p class="MiniCategory" style="display: inline;">Category 7</p>
             <p class="MiniCategory" style="display: inline;">Category 8</p>
             <p class="MiniCategory" style="display: inline;">Category 9</p>
             <p class="MiniCategory" style="display: inline;">Category 10</p>
             <p class="MiniCategory" style="display: inline;">Category 11</p>
             <p class="MiniCategory" style="display: inline;">Category 12</p>
             <p class="MiniCategory" style="display: inline;">Category 13</p>
             <p class="MiniCategory" style="display: inline;">Category 14</p>
             <span id="NavigateFordward">></span>
       </div>
    </div>


     <script language="javascript" type="text/javascript">
                        $(document).ready
                        (
                            Initialize()
                        );

                        function Initialize()
                        {
                            InitList();

                        }
                        function InitList()
                        {
                            $("#NavigateBackward").hover
                            (
                                function()
                                {
                                    $("#CategoryList").animate({ "left": "-=50px" }, 1500);      
                                }
                            );
                            $("#NavigateFordward").hover
                            (
                                function() 
                                {
                                    $("#CategoryList").animate({ "right": "+=50px" }, 1500); 
                                }
                            );
                        }
    </script>

Заранее спасибо за вашу помощь. С уважением. Джон.

Answer 1

В этом случае вы можете использовать jQuery Scrollable . Это что вы хотите?

Answer 2

Или сделай сам

$(document).ready (Initialize);

function Initialize(){
    InitList();
}

var moveLeft = false;
var moveRight = false;

var left = function() {
    if (moveLeft)
        $("div#CategoryList").animate({ "marginLeft": "-=5px" }, 150, 'linear', left);
};

var right = function() {
    if(moveRight)
        $("div#CategoryList").animate({ "marginLeft": "+=5px" }, 150, 'linear', right);
};

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

А у вашей разметки есть некоторые недостатки, поскольку «вперед» и «назад» находятся внутри div#CategoryList, что означает, что при прокрутке влево / вправо сами маркеры исчезают (вы должны переместить их за пределы div#CategoryList