jquery - 如何在CSS中创建滚动菜单？

Question

我想创建这样的东西

实际上我真的不知道叫什么，如果有人知道请告诉我，这样我也可以在谷歌上搜索。

当我们点击箭头时，应该会出现另一个结果我将有很多固定装置

我在想

1> 一个表格，有一列并一一显示它们

2>包含整个列表的动态列表？

需要建议。

我对此一无所知，您能告诉我一些关于此问题的路径吗？谢谢。

Answer 1

我对Tim4497的方法做了一些修改。

此方法允许任意数量的列表项，并且具有纯 Javascript 解决方案的优点(不需要 JQuery!)

该方法通过float: left的方式水平排列列表项，然后通过将ul元素设置为固定宽度来导致列表中断>400 像素。溢出的元素通过 overflow:hidden 隐藏。

var list_items = [];
var index = 0;
var list_length = 0;

function getAllListItems() {
    var temp = document.getElementsByTagName('li');

    for (i = 0; i < temp.length; i++) {
        list_items.push(temp[i]);
    }

    list_length = temp.length;
}

下面的函数

function move(dir){}

附加到按钮元素，如下所示:

<button id='right' onClick='move(right)'>></button>

并且它会智能地隐藏正确的元素以产生向右移动的效果。

function move(dir) {
    if (dir == left) {
        list_items[index].style.display = 'block';
        index--;

        if (index < 0) {
            index = 0;
        }
    } else if (dir == right) {

        list_items[index].style.display = 'none';

        if (index >= ((list_length) - 1)) {
            index = (list_length) - 1;
        } else {
            index++;
        }
    } else {}
}

Relevant JSFiddle