jQuery全屏滚动插件XSwitch

所属分类：UI-滚动

44683 401 查看评论 (14)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：XSwitch是一个可以高度自定义的全屏滑动JQuery插件

如何使用

需要有一个基本的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>

需要一些基础的样式支持

<style media="screen">
    /*简单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;
    }
</style>

并引入JQuery与插件

<script src="js/jquery-1.12.3.min.js" charset="utf-8"></script>
<script src="js/pageswitch.js" charset="utf-8"></script>

插件的调用

设置了两种调用插件的方法：

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

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

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

<script>
    $('#container').XSwitch({
        direction: 'horizontal'
    });
</script>

插件配置相关

/*默认配置*/

{
    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省市区三级联动插件_城市三级联动插件（原创)

javript原生代码，照片墙