javascript轮播插件的使用(TouchSlide)

插件一：TouchSlide

地址

http://www.superslide2.com/TouchSlide/

简介

TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

使用

参照官方api即可上手使用

注意事项

1、此插件是纯js开发，不依赖其他任何js库
2、此插件只模拟了部分jQeury选择器(包括"#"、"."、"标签名称"，用空格隔开)，不支持其他选择器，比如不识别这种'div>p'写法等等
3、slideCell，此值代表容器对象，这个必须是id对象的值，不能是类名
4、titCell，此值代表导航元素对象或导航元素的包裹层对象。(一般情况下，此值为导航元素对象，比如".hd ul li"，但是当'autoPage'这个参数为true时，那么titCell的值则需是导航元素的包裹层对象，比如".hd ul")
5、经测试，可以嵌套使用轮播

6、关于下方"实现方式"中的注意

实现方式

针对轮播的元素，插件会复制最后一个元素添加到第一个位置，复制第一个元素添加到最后一个位置。这样在左右轮播的时候可以无缝衔接。

注意：由于此复制特性，故在使用时需注意。比如利用id名来js操作时，可能会失效等等，因为它可能会复制出相同id名的元素，从而导致一些意外。

插件二：swiper

地址

http://www.swiper.com.cn/

实现方式

(同上面TouchSlide)

注意事项

1、使用方式和版本相对于，注意

2、多次使用swiper时候，类名的定义，只能在默认的类名基础上追加，而不能修改，因为原来类名有样式？？比如 <div class="swiper-container mytest1">....</div>等等)??

疑难杂症

1、spaceBetween参数无法使用rem单位来自适应

【解决】该参数可以使用百分数来完美解决，注意加引号比如，spaceBetween : '2%'

进阶知识点

Swiper有方法和属性，利用实例化出来的对象进行操作，有不可思议的效果。

属性（暂略，参看手册）

方法 slideTo()、startAutoplay()...等等，参看手册

slideTo()

语法：

Swiper对象.slideTo(索引值,切换速度时间,回调函数)

语法详解：

索引值

　　设置想要切换到的索引值，0就是第一个元素

切换速度时间

　　单位毫秒。当切换速度时间不为零时，有切换效果，如果不想有切换效果，那么可以直接设置为0

回调函数

　　略

举例

　　var mySwiper = new Swiper('.swiper-container',{
　　})
　　$('#btn').click(function(){
　　 mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
　　})

转载于:https://www.cnblogs.com/shenxinpeter/p/7200023.html