使用jQuery Cycle的Fullpage.js

时间:2016-02-05 04:39:56

标签: javascript jquery html fullpage.js jcycle

即时工作我需要在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
        });

请帮助我们,先谢谢你们。

0 个答案:

没有答案