fullpage.js横屏多页面切换

fullpage.js是一款切换效果插件，支持主流浏览器与ie8 ，网上的示例多是纵向切换，但是横向切换示例较少，翻看了一下api文档，调用moveTo方法，即可切换至任意纵向任意横向的分屏中，先看下效果

这里没有使用默认导航栏，而是自定义的切换按钮，更加灵活方便，便于修改，页面也使用的是iframe嵌套，官方示例中多是图片背景切换，没有太大的价值，切换代码很简单，首先引用fullpage.js和jquery，页面初始化隐藏默认的横向切换组件，然后对切换按钮事件进行绑定，调用api即可

代码语言：javascript复制

 $(function () {
            $('#content').fullpage({
                controlArrows: false,
            });
            $()
            $('a').each(function (index) {
                $(this).unbind('click').click(function () {
                    //moveTo方法参数，第一个参数为section的下标，第二个参数为slide的下标
                    //section为纵向切换，slide为横向切换
                    $.fn.fullpage.moveTo(1, index);
                    $("li").removeClass();
                    $(this).parent('li').addClass("active");
                })
            })
        });

示例代码地址：FullPage横屏切换示例: FullPage横屏切换示例

function slide 插件 浏览器 事件

0 人点赞