touchslide cdn

TouchSlide是一款纯javascript打造的触屏滑动特效插件，专门面向手机、平板电脑等移动终端，它能够实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果，因其开源、体积小、简单实用且功能强大的特点，成为架构移动终端网站的重要选择。

主要特点

1、纯javascript开发：不依赖任何js库，这使得它在各种环境下都能轻松集成和使用。

2、调用方法独特：与SuperSlide不同，TouchSlide的调用方法需要指定slideCell为id对象，例如TouchSlide({slideCell:"#slider",effect:"leftLoop"})。

3、支持简单的jQuery选择器：为了方便使用，TouchSlide用js模拟了简单的jQuery选择器，支持“#”、“.”和“标签名称”作为选择器，并用空格隔开，除了slideCell必须用id选择器外，其他如titCell等都可以使用这些选择器。

使用方法

1、引用TouchSlide.js：在HTML文件的head部分通过script标签引入TouchSlide.js文件，具体路径需自行设置。

2、编写HTML结构：按照默认的HTML结构进行编写，通常是包含导航元素和内容的div结构，一个包含ul的.hd作为导航元素，以及一个包含ul的.bd作为内容区域。

3、编写CSS样式：为HTML元素赋予相应的样式，以确保在移动设备上的显示效果和交互体验。

4、调用TouchSlide：在页面加载完成后，通过script标签中的TouchSlide方法来初始化插件，需要注意的是，最好在相关div结束后立即调用TouchSlide，以避免整个页面加载后再调用导致的延迟或问题。

参数配置

TouchSlide提供了丰富的参数配置选项，以满足不同的需求，以下是一些常用的参数及其说明：

示例代码

以下是一个使用TouchSlide实现触屏焦点图切换的示例代码：

TouchSlide({
    slideCell: "#focus", // 容器对象，必须是id对象
    titCell: ".hd ul", // 导航元素对象，鼠标触发元素即原标图点等
    mainCell: ".bd ul", // 切换元素的包裹层对象
    effect: "leftLoop", // 效果类型，如"left"表示左滚动，"leftLoop"表示左循环滚动等
    autoPlay: true, // 是否自动运行
    interTime: 3000 // 自动运行间隔（毫秒）
});

在这个示例中，我们创建了一个包含焦点图切换效果的页面，当用户在移动设备上浏览该页面时，可以通过触屏操作来切换焦点图，我们也设置了自动播放功能，使焦点图能够在一定时间间隔后自动切换。

相关问题解答

Q1：TouchSlide是否支持响应式设计？

A1：是的，TouchSlide支持响应式设计，通过设置合适的CSS样式和参数配置，可以确保在不同屏幕尺寸和分辨率的设备上都能获得良好的显示效果和用户体验，特别是v1.1版本中增加了宽度自适应功能，修复了安卓横屏时滑动范围不变的bug。

Q2：如何在TouchSlide中添加自定义动画效果？

A2：在TouchSlide中添加自定义动画效果可以通过startFun和endFun参数来实现，这两个参数分别允许用户在每次切换效果开始和结束时执行自定义函数，用户可以在这些函数中编写自己的动画逻辑或调用其他动画库来实现自定义动画效果。

TouchSlide({
    slideCell: "#focus",
    startFun: function(i, c) {
        // 自定义动画开始时的代码
        console.log("Animation started for slide: " + i);
    },
    endFun: function(i, c) {
        // 自定义动画结束时的代码
        console.log("Animation ended for slide: " + i);
    }
});

在上述代码中，我们通过startFun和endFun参数分别为每次切换效果的开始和结束添加了控制台日志输出，用户可以在这些函数中添加更复杂的动画逻辑或调用其他动画库来实现自定义动画效果。

小编有话说

TouchSlide作为一款强大的触屏滑动特效插件，为移动终端网站提供了丰富的交互效果和良好的用户体验，其纯javascript开发、不依赖任何js库的特点使得它在各种环境下都能轻松集成和使用，丰富的参数配置选项也满足了不同用户的需求，无论是初学者还是有经验的开发者，都可以通过TouchSlide来快速构建出具有吸引力的移动终端网站。