如何使用Javascript制作侧幻灯片菜单类型的东西？

我真的不知道他们叫什么。不知什么原因，我记不得了。但是你知道，在很多主页上，他们都有类似于菜单的东西，面板通过显示他们的产品来滑动？我非常需要学习如何做到这一点，尽管我实际上在做的是在你点击一些文本时让一个面板滑动过去。据我所知，这些想法基本相同，只是那些菜单每隔几秒钟就会自动执行一次

现在我非常清楚地知道如何使用Javascript。我现在的问题是（令人担忧的）基本HTML。这就是我得到的：

HTML:

不要注意颜色或任何东西，这只是练习

它正在做它应该做的一切，除了在页面底部有一个滚动条，允许我向右滚动并看到第二个div。。。这是个问题。我是在做一些根本错误的事情，还是只需要添加一些东西来摆脱滚动条

另外，Javascript上还有一点不确定性。我怎样才能使两个div的剩余利润在同一时间发生变化呢？哪怕是一点点耽搁也会出现，对吧

只链接到教程可能更容易。我试着研究这个，但我不知道该查什么（忘了它们叫什么！）

编辑

好的，所以我接受了约书亚·查瓦尼的建议，把溢出的东西藏起来，这样做很有效。然后我用Javascript完成了所有这些：

var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");

switch1.onclick = move;
switch2.onclick = move;

function move() {
    if (menu1.style.marginLeft == 0) {
        show2();
    }
    else {
        show1();
    }
}

function show2() {
    if (menu1.style.marginLeft > -100) {
        menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
        requestAnimationFrame(show2);
    }
}

当我点击switch1时，menu1移动超过10px，然后停止移动。不知道为什么。

退房

---

它会满足你的所有要求，你不必自己写

我想你在找一个旋转木马，把溢出隐藏在身体上。不是旋转木马，更多的是幻灯片。检查编辑。不，我的目标是学习如何自己写。检查编辑。

#menu1 {
    position: absolute;
    display: inline-block;
    background: #d8d808;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 0%;
}

#menu2 {
    position: absolute;
    display: inline-block;
    background: #7feaa8;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 100%;

}

var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");

switch1.onclick = move;
switch2.onclick = move;

function move() {
    if (menu1.style.marginLeft == 0) {
        show2();
    }
    else {
        show1();
    }
}

function show2() {
    if (menu1.style.marginLeft > -100) {
        menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
        requestAnimationFrame(show2);
    }
}