Question

我正在尝试做一个网站，其中有一个部分内容必须水平滚动，当你点击菜单按钮，它也有方向导航，我想我得到它的方向导航但我不能弄清楚如何跟踪我的div的位置，以便每次点击它们时移动它们。我想使用offset（）;与jquery但不能做工作。如果有人能帮助我实现这一目标，我将不胜感激。生病留下一些代码和一个小提琴，所以你们可以看到我到目前为止。

html代码：

<nav>
    <ul>
        <li id="1" class="active-state">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
    </ul>
</nav>

<section id="content">
    <div id="wrapper">
        <div class="content" id="yellow"></div>
        <div class="content" id="blue"></div>
        <div class="content" id="red"></div>
        <div class="content" id="purple"></div>
        <div class="content" id="green"></div>
    </div>
</section>
<ul id="directionNav">
    <li id="left">left</li>
    <li id="right">right</li>
</ul>

用于执行水平滚动的jquery代码：

$("#3").on("click", horizontalScroll);
$("#4").on("click", horizontalScroll2);

function horizontalScroll() {
console.log($("#3").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

function horizontalScroll2() {
console.log($("#4").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

这里是小提琴：http://jsfiddle.net/xtatanx/DY3k3/

非常感谢所有人！

Answer 1

我认为你的编码很多！

使用链接的页面为HTML标记指定属性：

<li frame='1' class='nav'>page 1</li>

然后在所有.nav上添加一个signle函数，该函数将转到attribut中调用的页面：

function changeFrame(){
    $('#wrapper').animate({left : $(this).attr('frame')*-600});
    $('.active-state').removeClass('active-state')
    $(this).addClass('active-state')
}

对于你的下一个/上一个链接，只需查看你当前的页面并添加/减去1.我在2函数中做了一个更干净的代码。

点击它，点击查看，点击：

function navigFrame(){
    switch(this.id){
        case 'left' : doNavig(-1); break;
        case 'right' : doNavig(1); break;
    }
}

以下是onNavig的代码：

function doNavig(direction){
    var newPage = parseInt($('.active-state').attr('frame'))+direction;
    if(newPage < $('.nav').length && newPage >= 0){
        $('#wrapper').animate({left : newPage*-600});
        $('.active-state').removeClass('active-state')
        $('.nav:nth-child('+String(newPage + 1)+')').addClass('active-state')
    }
}

代码可以更优化，但我希望你做一些工作：）

以下是完整的代码：http://jsfiddle.net/DY3k3/2/

水平滚动内容

1 个答案: