版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38147456/article/details/85322216
记录一个不错的轮播图插件,功能蛮实 用的。
兼容ie8,功能包括:
- 切换轮播方向
- 自定义初始化前后事件
- 自定义切换前后事件(回调中可取其属性信息)
- 动态修改轮播实例
- 懒加载
文档可查看:转jq22地址:http://www.jq22.com/jquery-info406
简单用法:
1、先引入css,jquery,js
<link rel="stylesheet" href="js/slick.css">
<script src="js/jquery.js"></script>
<script src="js/slick.js"></script>
2、html如下:
<div class="slick">
<div class="slick-son">001</div>
<div class="slick-son">002</div>
<div class="slick-son">003</div>
<div class="slick-son">004</div>
<div class="slick-son">005</div>
</div>
3、js:
<script>
$('.slick').slick({
vertical:false,//垂直方向
dots: true,//指示点
autoplay:false,
autoplaySpeed:3000,
arrows:true,//左右箭头
onAfterChange:function(o){
console.log(o)
},//切换后的回调函数
slidesToShow:1,//幻灯片每屏显示个数
slidesToScroll:1,//幻灯片每次滑动个数
});
</script>