如何在同一个页面中使用两个auotplay

youyuxun commented 8 years ago

`

<!--第一屏开始-->
<div class="page section1 current">
    <div class="contain">
    </div>
</div>

<!--第二屏开始-->
<div class="page section2">
    <div class="contain">
        <div id="pageContain">
            <div class="page page1 current">
                <div class="contain">

                </div>
            </div>
            <div class="page page2">
                <div class="contain">

                </div>
            </div>
            <div class="page page3">
                <div class="contain">

                </div>
            </div>
        </div>
        <ul id="navBar2">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<!--第三屏开始-->
<div class="page section3">
    <div class="contain">
        <div id="pageContain2">
            <div class="page page1 current">

            </div>
            <div class="page page2">
                <div class="contain">

                </div>
            </div>
            <div class="page page3">
                <div class="contain">

                </div>
            </div>
        </div>
    </div>
    <ul id="navBar3">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

` 结构就是我贴的，现在写了两个的runPage对象，问题就是现在两个都不能autoPlay了，请问怎么解决？

powy1993 commented 8 years ago

你并没有写js调用代码，没有办法定位问题啊。

youyuxun commented 8 years ago

`var runPage, runPage2, interval, autoPlay,runSection;

autoPlay = function(to) {
    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 4000);
};

runPage = new FullPage({

    id : 'pageContain',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'X',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'nav:navBar2',               // mode of fullpage
    easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange
        index = index +1 > 2 ? 0 : index + 1;
        autoPlay(index);
    }
});
runPage2 = new FullPage({

    id : 'pageContain2',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'X',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'touch,nav:navBar3',               // mode of fullpage
    easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange
        index = index +1 > 2 ? 0 : index + 1;
        autoPlay(index);
    }
});

runSection = new FullPage({

    id : 'main',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'wheel,nav:navBar',               // mode of fullpage
    easing : [0, .93, .39, .98],
    callback : function(index, thisPage) {     // callback when pageChange

        if (index===1) {
            clearTimeout(interval);
            autoPlay(runPage.thisPage()+1);
        }
        else if(index===2){
            clearTimeout(interval);
            autoPlay(runPage2.thisPage()+1);
        }
        else {
            clearTimeout(interval);
        }
    }
});`

这是js代码,在index＝＝2这个判断里也加了alert试过发现确实有执行到条件里，但是autoplay没有执行

powy1993 commented 8 years ago

autoplay 也要写成两个哦 interval 也是

youyuxun commented 8 years ago

按照提供的方法试了一下，还是不可以在runpage2对象的回调里加的alert不起作用是不是应该写在别的回调函数里？

`var runPage, runPage2, interval, _interval,autoPlay,_autoPlay,runSection;

autoPlay = function(to) {
    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 4000);
};
    _autoPlay = function(to) {
        clearTimeout(_interval);
        _interval = setTimeout(function() {
            runPage.go(to);
        }, 4000);
    };

runPage = new FullPage({

    id : 'pageContain',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'X',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'nav:navBar2',               // mode of fullpage
    easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange
        index = index +1 > 2 ? 0 : index + 1;
        autoPlay(index);
    }
});
runPage2 = new FullPage({

    id : 'pageContain2',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'X',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'touch,nav:navBar3',               // mode of fullpage
    easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange
        index = index +1 > 2 ? 0 : index + 1;
        alert(index);
        _autoPlay(index);
    }
});

runSection = new FullPage({

    id : 'main',                            // id of contain
    slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                    // [scalefrom, scaleto]
            rotate : [0, 0]                    // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },
    mode : 'wheel,nav:navBar',               // mode of fullpage
    easing : [0, .93, .39, .98],
    callback : function(index, thisPage) {     // callback when pageChange

        if (index===1) {
            clearTimeout(interval);
            clearTimeout(_interval);
            autoPlay(runPage.thisPage()+1);
        }
        else if(index===2){
            clearTimeout(interval);
            clearTimeout(_interval);
            _autoPlay(runPage2.thisPage()+1);
        }
        else {
            clearTimeout(interval);
        }
    }
});
})`

powy1993 commented 8 years ago

你 _autoPlay 里面的 runPage 都是同一个。。。没有用到 runPage2 当然没有回调了

youyuxun commented 8 years ago

疏忽了。。。谢谢指导这个插件挺不错的

powy1993 / fullpage

如何在同一个页面中使用两个auotplay #34