Question

我需要帮助重写我的jQuery。我在顶部有四个链接：“一，二，三，四”

当你离开One - ＆gt;二，从右边擦拭。完美！

当你从两个去 - >一，它从右边擦拭。不理想。我希望它从左侧滑入而不是。

依据每个人的位置等等。这很容易吗？

HTML：

<a data-section="one" href="#">One</a>
<a data-section="two" href="#">Two</a>
<a data-section="three" href="#">Three</a>
<a data-section="four" href="#">Four</a>

<div id="hello">
    <section id="one" class="active">One</section>
    <section id="two">Two</section>
    <section id="three">Three</section>
    <section id="four">Four</section>
</div>

CSS：

#hello, #hello section{
    min-width: 350px;
    height:330px;
    background:green;
}

#hello section{
    position: absolute;
    left:100%;
}

#hello{
    position: relative;
    overflow: hidden;
    width:90%;
}

#hello section:nth-child(1){left:0%}

jQuery的：

$('a').on('click', function(event) {

    event.preventDefault();

    var sectionId = $(this).attr("data-section"),
        $toSlide = $("#hello section#" + sectionId),
        $fromSlide = $('.active');

    if (!($toSlide.hasClass("active"))) {

        $fromSlide.animate({
            "left": "-100%"
        }, 500, 'linear')
        $toSlide.animate({
            "left": "0%"
        }, 500, 'linear', function() {
            $fromSlide.css("left", "100%");
            $fromSlide.removeClass("active");
            $toSlide.addClass("active");
        });
    }

});

Answer 1

正如@James指出的那样 - 这个表演不会像你想要的那样完美，但它很小，很简单，还有幻灯片！（比你的多一点：）

jsBin demo

这就是你所需要的：

<强> HTML

<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>

<div id="hello">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
    <section>Four</section>
</div>

<强>的jQuery

$('a').click(function(event) {
    event.preventDefault();
    $('#hello').stop().animate({scrollLeft: $(this).index() * $('#hello').width() },700);
});

<强> CSS

#hello, #hello section{
    min-width: 350px;
    height:330px;
    background:green;
}   
#hello{
  position: relative;
  overflow:hidden;
  width:90%;
  white-space:nowrap;
}
section{
    width:100%;
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:middle;
    margin-right:-4px;
}

Answer 2

这段代码并不像roXon那样漂亮，但保留了原始的滚动机制。 roXon的代码将滚动浏览所有不同的选项，例如，从一到四，而这一个将跳到右边四个。

Check it out here.

编辑：请注意，此代码并非完美无瑕。我在下面添加了对roXon优秀调试结果的部分修复，但它仍然不能完全控制疯狂点击。如果这是你想要的，你会想要更多一点，以便它处理疯狂的点击。

重写jQuery以向左和向右滚动

2 个答案:

jsBin demo