Question

我正在为我最好的朋友创建婚礼网站。它包括一个水平滚动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",
       });
    });

在第一个和最后一个位置停用一些技巧。

Answer 2

您可以使用锚标记尝试以下内容。

<a href="#image1" id="a1">Person 1</a>
<a href="#image2" id="a2">Person 2</a>
<a href="#image3" id="a3">Person 3</a>

然后在每个div中（假设每个新娘都有自己的div），你可以把

<div id="image1">Stuff goes here...</div>
<div id="image2">Stuff goes here...</div>

或者如果你想使用jQuery，你可以做

var currentimage = 1;
var maximages = 16;
$('#myrightarrow').on('click', function(){
    currentimage++;
    if(currentimage >= maximages){
        currentimage = 16;
    }
    $('#div' + currentimage).focus();
});
$('#myleftarrow').on('click', function(){
    currentimage--;        
    if(currentimage == 0){
        currentimage = 1;
    }
    $('#div' + currentimage).focus();
});

非常基本，如果它不是你想要的，请提前道歉。这不会很好地滚动或任何东西，它只会跳转到图像。

Answer 3

使用jQuery，您可以非常轻松地浏览#scroll： DEMO 您可以根据newMargin元素的边距/填充

调整LI值

$(function(){
    $('#scroll_arrowleft').on("click",function(){
        var newMargin = 0;
        switch (parseInt($('#scroll ul').css("margin-left"),10)) {
            case 0:
                newMargin = -2760;
                break;
            case -920:
                newMargin = 0;
                break;
            case -1840:
                newMargin = -920;
                break;
            case -2760:
                newMargin = -1840;
                break;
            default:
                newMargin = 0;
        }
        var newMargin = newMargin + "px"
        $('#scroll ul').animate({marginLeft:newMargin});
    });
        $('#scroll_arrowright').on("click",function(){
        var newMargin = 0;
        switch (parseInt($('#scroll ul').css("margin-left"),10)) {
            case 0:
                newMargin = -920;
                break;
            case -920:
                newMargin = -1840;
                break;
            case -1840:
                newMargin = -2760;
                break;
            case -2760:
                newMargin = 0;
                break;
            default:
                newMargin = 0;
        }
        var newMargin = newMargin + "px"
        $('#scroll ul').animate({marginLeft:newMargin});
    });
});

单击Div Divroll Right

3 个答案: