我正在网页上工作,我使用了本教程: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/
我认为这应该很简单,但我无法让它发挥作用。提前谢谢!
答案 0 :(得分:0)
我想我现在明白你想要实现的目标。嗯,实际上你想要使用的源码不是很好的代码,使事情更难解决。
首先,默认情况下将第一个链接指定为“已选择”类:
<li><a href="#box1" class="selected link">Home</a></li>
这是点击的原始处理程序(仅供参考/您理解):
$('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;
});
这适合你吗?如果是,那么现在面临挑战:自己实施“上一步”按钮! :)
修改强>
更正了.next处理程序