• 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秒
      })

  • 相关阅读:
    ssk文件 窗体皮肤
    子窗体加载时最大化出现异常不正常最大化显示
    android: ADB错误“more than one device and emulator”
    使用adb devices命令报:adb server version (39) doesn't match this client (41);killing
    测试需要关注的测试点以及测试优先级(一)——接口测试
    解决Jenkins可安装插件列表没有可选择插件问题
    Win10同时安装jdk1.7和jdk1.8
    Python中@staticmethod 和@classmethod 的区别
    windows下彻底删除jenkins
    selenium如何保证元素定位的成功率
  • 原文地址:https://www.cnblogs.com/shenxinpeter/p/7200023.html
Copyright © 2020-2023  润新知