前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >fullpage.js横屏多页面切换

fullpage.js横屏多页面切换

作者头像
code2roc
发布2023-07-19 14:30:04
3620
发布2023-07-19 14:30:04
举报

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横屏切换示例

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档