2

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

当您从一-> 二走时，它会从右侧擦除。完美的！

当您从二 --> 一开始时，它会从右侧擦入。不理想。我希望它从左侧滑入。

依此类推。这容易吗？

http://jsfiddle.net/5N3YK/126/

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

});
4

2 回答 2

3

正如@James 所指出的那样 - 这不会完全像你想要的那样执行，但它很小、简单而且有幻灯片！（只是比你的多一点:)

jsBin 演示

这就是你所需要的：

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;
}
于 2012-10-10T02:57:03.243 回答
1

这段代码不像 roXon 那样漂亮，但保留了原始的滚动机制。当你从一到四时，roXon 的代码将滚动浏览所有不同的选项，而这个会直接跳到四。

在这里查看。

编辑：请注意，此代码并非完美无缺。我在下面为 roXon 的出色调试结果添加了部分修复，但它仍然不能完全承受疯狂的点击。如果这就是你想要的，你会想要再修复它一点，以便它处理疯狂的点击。

于 2012-10-10T03:07:25.303 回答