Question

我已经做到了：

HTML

<a id="1" href="#">Slide 1</a>
<a id="2" href="#">Slide 2</a>
<a id="3" href="#">Slide 3</a>

<div class="scroller">
    <div class="container">
        <div id="slide-1">
            <h1>First slide</h1>
            <p>content</p>
        </div>
        <div id="slide-2">Second</div>
        <div id="slide-3">Third</div>
    </div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
}

.scroller {
    width: 100%;
    height: 400px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.container {
    height: 500px;
    width: 500%;
}
.container div {
    height: 400px;
    width: 100vw;
    float: left;
}

#slide-1 {
    background: red;
}

#slide-2 {
    background: violet;
}

#slide-3 {
    background: grey;
}

JS

$("a").on("click", function() {
    var e = $(this).attr("id");
    var t = $("#slide-" + e).position().left;
    $(".scroller").animate({
        scrollLeft: t
    }, 600)
})

演示在这里：jsfiddle.net/dxcmnpog/2 /

当用户点击锚标记（＃slide-x）时，脚本应向左滑动到实际的div＃slide-x。

问题是它只在可见幻灯片是第一个时才有效。因此，当用户在第二张幻灯片上并希望继续第三张幻灯片时，它不起作用。

你知道是什么原因引起的吗？非常感谢你。

Answer 1

$("a").on("click", function() {
    var e = $(this).attr("id");
    var t = $("#slide-" + e).width()*(e-1);
    console.log(t);
    $(".scroller").animate({
        scrollLeft: t
    }, 600)
})

DEMO：http://jsfiddle.net/dxcmnpog/9/

我使用了width（）元素，并且滚动与它相关。因此，当第一个元素可见时（slide1 / link1 - ＆gt; position / scrolling为0，对于第二个元素，向左滚动是：width * 1，第三个：width * 2等等...

P.S。将console.log（t）添加到您的小提琴中，您将看到导致更多错误的问题。

水平滚动仅适用于第一张幻灯片

1 个答案: