欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > jQuery全屏滚动插件

jQuery全屏滚动插件

jQuery全屏滚动插件

关键词:全屏滚动,全屏翻页,全屏滑动,jquery插件,jquery全屏滚动插件,jquery库,gongjulei

描述:XSwitch是一款jQuery全屏滚动插件。XSwitch可以高度自定义,生成通过鼠标滚动全屏翻页的效果。

简要教程

XSwitch是一款jQuery全屏滚动插件。XSwitch可以高度自定义,生成通过鼠标滚动全屏翻页的效果。

使用方法

在页面最后引入jquery和XSwitch.min.js文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/XSwitch.min.js"></script>                  
                
HTML结构

基本的HTML结构如下。

<!-- 插件基本结构 -->
<div id="container">
    <div class="sections">
        <div class="section" id="section0"></div>
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
    </div>
</div>
                
CSS样式

然后添加一些基础的样式支持。

/*简单reset*/
* {
    margin: 0;
    padding: 0;
}
/*必须,关系到单个page能否全屏显示*/
html,
body {
    height: 100%;
    overflow: hidden;
}
#container,
.sections,
.section {
    /*必须,兼容,在浏览器不支持transform属性时,通过改变top/left完成滑动动画*/
    position: relative;
    /*必须,关系到单个page能否全屏显示*/
    height: 100%;
}
.section {
    /*有背景图时必须,关系到背景图能否全屏显示*/
    background-color: #000;
    background-size: cover;
    background-position: 50% 50%;
}
/*非必需,只是用来设置背景图,id不会被插件用到*/
#section0 {
    background-image: url(img/img1.jpg);
}
#section1 {
    background-image: url(img/img2.jpg);
}
#section2 {
    background-image: url(img/img3.jpg);
}
#section3 {
    background-image: url(img/img4.jpg);
}
/*以下样式用来设置slider样式,可自行修改*/
.pages {
    position:fixed;
    right: 10px;
    top: 50%;
    list-style: none;
}
.pages li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin: 15px 0 0 7px;
}
.pages li.active {
    margin-left: 0;
    width: 14px;
    height: 14px;
    border: 4px solid #FFFFFF;
    background: none;
}        
                
初始化插件

有两种调用插件的方法:

方法一: 通过给div#container添加属性data-XSwitch调用,插件将会使用默认配置,如:

<div id="container" data-XSwitch>
    ...
</div>              
                

方法二 :通过js调用,使用这种方法可设置参数。

$("#container").XSwitch({
    direction: "horizontal"
});          
                

使用方法

XSwitch插件配置参数如下:

/*默认配置*/
{
    selectors: {
        sections: ".sections", //容器类名
        section: ".section", //子容器类名,即每个单页
        page: ".pages", //slider类名 插件会生成一个ul侧边栏
        active: ".active" //被选中的slider下li的类名
    },
    index: 0,  //起始页下标
    easing: "ease",  //动画类型,支持transition所有类型
    duration: 500,  //动画执行时间 单位毫秒
    loop: false, //是否支持循环滑动
    pagination: true, //是否分页
    keyboard: true, //是否支持键盘滚动事件
    direction: "vertical", //滑动方向 默认为垂直 设置为 horizontal 将水平滑动
    callback: "" //滑动完成后的回调函数
} 
                

该jQuery全屏滚动插件的github网址为:https://github.com/XxinLiang/XSwitch

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9644.html

 在线演示  免费下载
编号:201903180000009644
大小:1.03MB
上传时间:2019-03-29 07:01
素材由用户"uopueqe140710"上传分享。

标签

最新推荐素材

与jQuery全屏滚动插件相关的素材

.