文章/答案/技术大牛

发布

社区首页 >问答首页 >水平滚动只从第一张幻灯片开始工作。

问水平滚动只从第一张幻灯片开始工作。
EN

Stack Overflow用户

提问于 2014-11-09 16:58:03

回答 1查看 107关注 0票数 0

我做了这个：

<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;
}

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

演示程序在这里: jsfiddle.net/dxcmnpog/2/

当用户单击锚标记(一个#幻灯片-x)时，脚本应该滑到实际的div#幻灯片-x。

问题是，只有当可见幻灯片是第一张时，它才能工作。因此，当用户在第二张幻灯片上，并想去第三张幻灯片，它不工作。

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

jquery

horizontal-scrolling

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-09 17:35:35

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

演示：http://jsfiddle.net/dxcmnpog/9/

我使用了元素的宽度()，滚动与它相关。因此，当第一个元素可见时(滑动1/link1 1 ->位置/滚动为0，第二个元素为:宽度*1，第三个元素:宽度*2，等等)。

把console.log(t)加到你的小提琴上，你就会发现导致更多错误的问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26830688

复制

相似问题

问水平滚动只从第一张幻灯片开始工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平滚动只从第一张幻灯片开始工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平滚动只从第一张幻灯片开始工作。
EN