slick.js--jquery插件

引用文件

<link rel="stylesheet" href="style/slick.css">

<script src="script/jquery.min.js"></script>

<script src="script/slick.min.js"></script>


HTML

<div class="slick">

<div><a href="http://www.jq22.com "><img src="" alt='' "></a></div>

<div><a href="http://www.jq22.com "><img src="" alt=" "></a><div>

<div><a href="http://www.jq22.com"><img src=" " alt=" "></a></div>

<div><a href=" http://www.jq22.com"><img src=" " alt=" "></a></div>

<div>,<a href="http://www.jq22.com "><img src=" " alt=" "></a></div>

</div>


javascript

$(function(){

     $('.slick').slick({

             dots:true

     }); 

     });


参数:

accessibility:布尔值       true     启用Tab键和箭头键导航

autoplay:     布尔值       false    自动播放

autoplaySpeed:整数     3000    自动播放间隔

centerMode:  布尔值     false    中心模式

centerPadding:字符串   ’50px’   中心模式左右内边距

cssEase:         字符串    ‘ease’   CSS3 动画

customPaging:function    n/a     自定义分页

dots                 布尔值     false    指示点

draggable:       布尔值     true      启用桌面拖动

easing:            字符串    ‘linear’    animate() fallback easing

fade:                布尔值     false      淡入淡出

arrows:            布尔值      true       左右箭头

infinite:             布尔值     true        循环播放

lazyLoad:        字符串    ‘ondemand’  延迟加载,可选 ondemand 和 progressive

onBeforeChange(this, index)   methodnull    开始切换前的回调函数

onAfterChange(this, index)      methodnull    切换后的回调函数

onInit(this)        method      null         第一次初始化后的回调函数

onReInit(this)   method      null         再次初始化后的回调函数

pauseOnHover  布尔值     true        鼠标悬停暂停自动播放

responsive       object         null        断点触发设置

slide                 字符串       ‘div’          滑动元素查询

slidesToShow    整数          1             幻灯片每屏显示个数

slidesToScroll    整数          1             幻灯片每次滑动个数

speed                整数         300           滑动时间

swipe               布尔值        true          移动设备滑动事件

touchMove      布尔值         true          触摸滑动

touchThreshold 整数           5              滑动切换阈值,即滑动多少像素后切换

useCSS           布尔值        true           使用 CSS3 过度

vertical             布尔值        false          垂直方向


方法:

1.slick():初始化 slick

2.unslick(): 销毁 slick

3.slickNext():切换下一张

4.slickPrev():切换上一张

5.slickPause():暂停自动播放

6.slickPlay():开始自动播放

7.slickGoTo()index : int切换到第 x 张

8.slickCurrentSlide():返回当前幻灯片索引

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,630评论 0 17
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 27,957评论 5 19
  • 学习 jQuery-fullPage.js 插件已经两天,参照网上的案例仿造了一个“魅族Note2官网”网页,中间...
    seporga阅读 6,510评论 2 11
  • 终于在8月底,新家装修差不多搞定了。 其实早在8月初,就开始甄选交换机、路由器等网络设备了。然后惊喜的发现,新家预...
    gzr阅读 231评论 0 0
  • 这几天发现了一个静态博客hexo,整了一下,发现还挺好玩的,试着用hexo写了几篇文章,真心是很喜欢markdo...
    hzhyiyy阅读 520评论 0 1