jQuery使用箭头向左和向右滑动容器

我正在制作一个网页，我使用了本教程：

现在我想使用“上一页”和“下一页”按钮控制页面的滚动。我似乎不知道该怎么做

使滑动容器工作的代码如下：

$('a.link').click(function () {  
        $('#wrapper').scrollTo($(this).attr('href'), 800);
        setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px', '1600px', '2000px')
        setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px', '2800px', '3200px')
        $('a.link').removeClass('selected');  
        $(this).addClass('selected');
        return false;  
    }); 
});

function setPosition(check, div, p1, p2, p3, p4, p5, p6) {
if(check==='#box1')
    {
        $(div).scrollTo(p1, 800);
    }
else if(check==='#box2')
    {
        $(div).scrollTo(p2, 800);
    }
else if(check==='#box3')
    {
        $(div).scrollTo(p3, 800);
    }
else if(check==='#box4')
    {
        $(div).scrollTo(p4, 800);
    }
else if(check==='#box5')
    {
        $(div).scrollTo(p5, 800);
    }
else 
    {
        $(div).scrollTo(p6, 800);
    }
};

我创建了一个像这样的“上一个”和“下一个”按钮

    <input type="button" class="next">
    <input type="button" class="prev">

我尝试实施这个选项，但没有成功：

---

我认为这应该很简单，但我就是不能让它工作。提前谢谢

我想我现在明白你想要实现什么了。实际上，你想要使用的源代码不是很好的代码，这使得问题更难解决

首先，默认情况下为第一个链接指定“选定”类：

<li><a href="#box1" class="selected link">Home</a></li>

现在，您要做的是将其主体提取到一个方法中，它将如下所示：

function performScroll(boxHref) {
    $('#wrapper').scrollTo($(boxHref).attr('href'), 800);
    setPosition($(boxHref).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
    setPosition($(boxHref).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
    $('a.link').removeClass('selected');  
    $(boxHref).addClass('selected');
}

$('a.link').click(function () {  
    performScroll(this);
    return false;  
});  

现在，您提取了click方法，我们将在下一个/上一个处理程序中使用它：

$('.next').click(function () {  
    // find current selected item
    var nextBox = $("a", $("li > a.selected").parent().next());
    performScroll(nextBox);
    return false;  
});

这对你有用吗？如果是，现在您面临的挑战是：自己实现“prev”按钮！：）

编辑

---

更正。下一个处理程序

JSFIDLE对我有效，又有什么问题？@thomasjaworski.com我尝试实现JSFIDLE，但对我无效。因此，我应该能够使用箭头将“800px”转到左边，将“800px”转到右边，但我无法让它工作。首先，您的左右按钮似乎是输入字段，但您的JS正在检查带有“link”类的锚点上的点击事件。您能确保您使用的是当前的JQuery版本吗（例如1.9.1）而不是原始代码中的旧1.3.2版本？OOOMG！你是我的英雄。好的，对不起，但非常感谢你，它起作用了！！！我将接受挑战，并尝试自己获得“prev”按钮，谢谢！找到它：$（'.prev'）。单击（函数（）{//find current selected item var prevBox=$（'a'，$（'li>a.selected”）。parent（）.prev（）；performScroll（prevBox）；返回false；}）；

$('.next').click(function () {  
    // find current selected item
    var nextBox = $("a", $("li > a.selected").parent().next());
    performScroll(nextBox);
    return false;  
});