我正在做一些我需要同时在 jQuery Cycle 中使用 Fullpage.js 的东西。现在我想要发生的是如果我单击带有 jCycle 的导航,则有多个 Fullpage 会滑动。我的 javascript 代码是这样的:
$(document).ready(function() {
$('#firstpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
var titles = ['FirstPage','SecondPage'];
$('#list')
.before('<div id="nav">')
.cycle({
fx: 'scrollRight',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '<a href="#">' + titles[index] + '</a>';
}
});
});
和我的html
<div id="list">
<div>
<div id="firstpage">
<div class="section " id="section0">
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
</div>
<div class="section" id="section2">
<div class="intro">
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro"></div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
</div>
</div>
<div>
<div id="secondpage">
<div class="section" id="section4">
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section5">
</div>
<div class="section" id="section6">
<img src="imgs/example2.png" alt="example" />
</div>
</div>
</div>
第一页正常工作,但是当尝试导航第二页时滚动不再起作用,但是当我尝试在 javascript 中添加类似这样的内容时,两个页面上的滚动都不起作用。
$('#secondpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
帮帮我,提前谢谢..