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

iyfjxgzm 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(106)

我在一个网页上工作，我使用了这个教程：http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-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">

我试着实现这个选项，但它不起作用：http://jsfiddle.net/ARTsinn/s2TJQ/4/
我想这应该很简单，但我就是不能让它工作。先谢谢你了!

jquery

来源：https://stackoverflow.com/questions/17465380/jquery-sliding-containers-to-left-and-right-with-arrows

1条答案

按热度按时间

wqsoz72f1#

我想我现在明白你想达到什么目的了。好吧，实际上你想使用的源代码不是很好的代码，使事情更难解决。
首先，默认情况下为First链接指定'selected'类：

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

下面是click的原始处理程序（仅供参考/您的理解）：

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

现在，你要做的是将它的主体提取到一个方法中，它看起来像这样：

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/prev处理程序中使用它：

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

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

编辑

更正下一个处理程序

赞(0）回复(0）举报 2023-06-22

我来回答

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

1条答案

相关问题

热门标签

最新问答