Touchslide

Gentbo 移动端触屏滑动轮播插件

Touchslide 是一个轻量级、高性能的 JavaScript 触屏轮播组件。

支持：

• 移动端手势滑动
• PC 鼠标拖动
• 左右滑动轮播
• 上下滑动轮播
• 自动播放
• 无限循环
• 导航切换
• 分页显示
• 前后按钮
• 动画回调
• Resize 自适应
• PointerEvent 优化

无第三方依赖，可独立运行。

✨ 特性

• ✅ 原生 JavaScript 实现
• ✅ 无 jQuery 依赖
• ✅ 支持移动端 Touch / Pointer
• ✅ GPU 加速动画
• ✅ translate3d 高性能移动
• ✅ 支持循环无缝轮播
• ✅ 支持自动播放
• ✅ 支持手势快速滑动
• ✅ 支持上下/左右方向
• ✅ 支持动态导航
• ✅ 支持分页状态
• ✅ 支持生命周期回调
• ✅ 自动处理窗口缩放

安装

直接引入：

<script src="https://cloud.m775.net/js/touchSlide.js"></script>

npm：

npm i @m775/touchSlide

import "@m775/touchSlide";

基础使用

HTML

<div id="slider">

    <div class="slider">

        <div>
            内容1
        </div>

        <div>
            内容2
        </div>

        <div>
            内容3
        </div>

    </div>


    <div class="nav"></div>

</div>

JavaScript

GB.Touchslide('#slider')
    .content('.slider')
    .nav('.nav', 'on', true)
    .left();

效果：

• 自动生成导航
• 支持左右滑动
• 支持点击导航切换

API

Touchslide(target)

创建轮播实例。

参数：

|参数|类型|说明| |-|-|-| |target|string|轮播主体选择器|

示例：

GB.Touchslide('#banner');

内容设置

content(classname)

设置轮播内容容器。

默认：

.slider

示例：

.content('.list')

HTML:

<div id="slider">

    <div class="list">

    </div>

</div>

导航

nav(classname,onClass,auto)

设置导航。

参数：

|参数|类型|说明| |-|-|-| |classname|string|导航容器| |onClass|string|选中样式| |auto|boolean|string|自动生成导航|

示例：

.nav('.nav','active',true)

生成：

<ul class="nav">

<li class="active">
1
</li>

<li>
2
</li>

</ul>

前后按钮

prev(classname,noLoopClass)

上一页按钮。

示例：

.prev('.prev')

next(classname,noLoopClass)

下一页按钮。

示例：

.next('.next')

HTML:

<button class="prev">
上一页
</button>

<button class="next">
下一页
</button>

分页

paging(index,total)

设置分页显示。

HTML:

<div class="paging">

<span class="index"></span>

/<span class="total"></span>

</div>

JS:

.paging(
 '.index',
 '.total'
)

显示：

1/5

循环播放

loop()

开启无限循环。

示例：

.loop()

效果：

1 → 2 → 3 → 1 → 2

自动播放

auto(ms)

开启自动播放。

参数：

|参数|默认| |-|-| |ms|2500|

示例：

.auto(3000)

表示：

每3秒自动切换一次。

动画时间

delay(ms)

设置切换动画时间。

默认：

200ms

示例：

.delay(500)

滑动方向

left()

左右滑动。

.left()

top()

上下滑动。

.top()

生命周期回调

before(callback)

动画开始执行。

参数：

function(index,total){

}

示例：

.before((index,total)=>{

    console.log(index,total);

})

after(callback)

动画结束执行。

示例：

.after((index,total)=>{

})

完整配置示例

GB.Touchslide('#banner')
    .content('.slider')
    .nav('.nav','active',true)
    .prev('.prev')
    .next('.next')
    .paging('.index', '.total')
    .loop()
    .auto(3000)
    .delay(300)
    .before((index,total)=>{})
    .after((index,total)=>{})
    .left()
    .start();

CSS 示例

#banner{

    overflow:hidden;

    position:relative;

}


#banner .slider{

    display:flex;

}


#banner .slider > div{

    flex:none;

}


.nav li.active{

    color:red;

}

工作流程

初始化

 ↓

获取轮播容器

 ↓

创建 Wrapper

 ↓

初始化尺寸

 ↓

绑定 Pointer/Touch事件

 ↓

用户滑动

 ↓

计算距离

 ↓

translate3d动画

 ↓

更新导航/分页

性能优化

Touchslide 内置：

GPU动画

使用：

translate3d()

减少浏览器重绘。

Resize节流

窗口变化：

requestAnimationFrame

优化重新计算。

滑动节流

移动过程中：

requestAnimationFrame

避免高频 DOM 更新。

浏览器支持

支持：

|环境|支持| |-|-| |Chrome|✅| |Safari|✅| |微信浏览器|✅| |Android WebView|✅| |iOS WebView|✅| |PC浏览器|✅|

全局对象

插件注册：

window.GB.Touchslide

调用：

GB.Touchslide()

Gentbo Custom License

Copyright (c) 2016-Present Zhou Bo
Website: https://developer.gentbo.com

Permission is granted to use this software for personal, educational, and commercial projects without modification.

You may not:

1. Modify this software.
2. Reverse engineer, decompile, or create derivative works based on this software.
3. Redistribute, resell, sublicense, or publish this software or modified versions.
4. Remove or alter copyright notices.

This software is provided "as is", without warranty of any kind. For commercial redistribution, OEM licensing, or special authorization:

Email: [email protected] QQ: 18486685 QQGroup: 431849998