XSwitch全屏滚动jQuery插件

PetitQ 幻灯片/轮播 2019-2-25 1.95K 0 2

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: '' //滑动完成后的回调函数

```
}
```

Github 网址：https://github.com/XxinLiang/XSwitch

XSwitch 全屏滚动 jQuery 插件

已有 487 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

XSwitch全屏滚动jQuery插件

使用方法

HTML 结构

CSS 样式

初始化插件

使用方法

XSwitch 全屏滚动 jQuery 插件

相关文章

支持移动设备图像轮播jQuery插件

Dreamslider - 九宫格组合动画jQuery幻灯片插件

纯CSS3炫酷3D立方体旋转幻灯片特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

HTML 结构

CSS 样式

初始化插件

使用方法

XSwitch 全屏滚动 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复