javascript - 单击 Div 向右滚动

Question

我正在为我最好的 friend 创建一个婚礼网站。它包括一个水平滚动 div，其中包含新娘派对中每个人的图像。 (总共 16 个。)单击图像时，会弹出该人的简短简介。看起来很棒，

但是我很好奇是否有办法让 div 通过单击箭头滚动到隐藏在滚动中的下一组图像。

我查找了很多 onClick 脚本。我似乎无法让它们中的任何一个按照我想要的方式工作。非常感谢您的帮助。也欢迎其他想法来获得类似的效果。

HTML 代码:

<div id="the_bridal_party">
    <h1>The Bridal Party</h1>

        <div id="scroll_wrapper">
        <div id="scroll_arrowleft"></div>
        <div id="scroll">
                <ul>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                <li>Linked Image</li>
                </ul>
        </div>
        <div id="scroll_arrowright"></div>
        </div>

        <small>(To find out more about anyone in the bridal party, click on their image.)</small>
    </div>

CSS 代码:

#the_bridal_party {
    width: 1000px;
    height: 380px;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#scroll_wrapper {
    width: 1000px;
    height: 300px;
    margin-top:25px;
    text-align: center;
}

#scroll {
    width: 920px;
    height: 300px;
    overflow: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

#scroll ul {
    margin: 0;
    padding: 0;
    list-style-type: none;  
}

#scroll ul li {
    display: inline;
}

#scroll_arrowleft {
    background-image: url(images/arrowleft.png);
    background-position-x: 50%;
    background-position-y: 50%;
    background-position: center;
    background-size: initial;
    background-repeat: no-repeat;
    width: 29px;
    height: 300px;
    cursor: pointer;
    float: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#scroll_arrowright {
    background-image: url(images/arrowright.png);
    background-position-x: 50%;
    background-position-y: 50%;
    background-position: center;
    background-size: initial;
    background-repeat: no-repeat;
    width: 29px;
    height: 300px;
    cursor: pointer;
    float: right;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Answer 1

类似于:

$("#scroll_arrowright").click(function(){
$("ul").animate({
   "margin-left": "-=908",
   });
});

$("#scroll_arrowleft").click(function(){
    $("ul").animate({
       "margin-left": "+=908",
       });
    });

通过一些小技巧可以在第一个和最后一个位置停用。