如何在css中创建滚动菜单？

Question

我想创建像这样的东西

实际上，我真的不知道如果有人知道什么叫，那就让我知道，这样我也可以在google上搜索。

当我们点击箭头时，应该会出现其他结果 我将拥有曼尼灯具

我在考虑

1＆GT;一个有列的表并逐一显示它们

2＆gt;具有整个列表的动态列表？

建议要求。

我对css和javascript一无所知，请你告诉我一些这样的路径。 谢谢。

Answer 1

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

此方法允许任意数量的列表项，并且具有纯Javascript解决方案的优势（不需要JQuery！）

此方法通过float: left水平排列列表项，然后通过将ul元素设置为固定宽度400px来导致列表中断。溢出的元素由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

Answer 2

将它们创建为li对象，将它们内联或向左浮动，为它们提供相同的宽度e.x. 100px然后制作一个隐藏溢出的包装（包装器必须小于所有li对象组合） 有点关闭js你可以设置，如果你点击一个箭头，包装纸滚动100px向左或向右