移动端网站的内容触摸滑动

对项目的说明：

前一段时间移动端网站中要求实现一个“内容触摸滑动”的功能，需求如下：

1. 通过点击小图显示大图；

2. 再次点击大图回到原来的小图；

3. 图片能够滑动切换；

4. 显示当前图片的索引(目前我正在浏览哪一张图片)。

自己写了一些功能，完成了第 1、2 的需求，但是由于 js 基础较差，就借用了 swiper 这个插件来完成了剩余的两个需求。

swiper常用于移动端网站的内容触摸滑动。swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。swiper 中文网官方网站 http://www.swiper.com.cn/，里面有详细的 api 文档和内容完善的在线演示。

首先展示下我的 demo 结构：

这是一个活动剪影分类，这个活动剪影中一共展示三个“项目(li)”，每一个项目里面有多条列表项目用来包裹 img 显示图片。

解决问题的思路：

1. 由于每一个项目里只需要最多九张图片，所以多余的图片将它删除(这篇文章中顺便也把这个功能实现了)；

2. 由于这里有多个 silhouette-item，当我们点击这个项目里的其中一张图片的时候，可以在每一个 silhouette-item 的最后临时创建一个 container 来存放需要展示的大图的一个容器；

解决方法：

1. 对于 html, 代码有些长，从上面的 demo 结构中就可以看出我的 html 代码，

2. 对于 css, 代码也有些长，但是没有什么特别需要指出的要点，看下面的其中一条列表项目 (silhouette-item)的 最终显示效果就够了：

3. js 代码：

/*===限制活动剪影的图片个数，最大为 9 张===*/for (var i = 0, listLen = $(".silhouette-img-list").length; i < listLen; i++) {  var $lis = $(".silhouette-img-list").find("li");  var liLen = $(".silhouette-img-list").eq(i).find("li").length;  if (liLen > 9) {    for (var j = 9; j < liLen; j++) {      $($lis[j]).remove(); // 每一次删除后 listLen 的值都会改变    }  }}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：移动端网站的内容触摸滑动

关键词：