jQuery插件slick实现响应式移动端幻灯片图片切换特效

前端技术 2023/09/05 JavaScript

jQuery响应式手机端移动端幻灯片图片切换特效插件slick，基于jQuery，功能非常强大，支持左右按钮切换、支持圆点切换、支持自定义切换数量，支持自定义切换速度、支持图片预加载、支持自动播放定义，效果非常的不错，众多的参数自定义支持，觉得可以的可以参考他们的参数配置，还是值得学习使用的。

使用方法：

1.加载插件和jQuery

<script src=\"//code.jquery.com/jquery-1.11.0.min.js\"></script> 
<script src=\"//code.jquery.com/jquery-migrate-1.2.1.min.js\"></script> 
<script type=\"text/javascript\" src=\"slick/slick.js\"></script> 
<link rel=\"stylesheet\" type=\"text/css\" href=\"slick/slick.css\"/>

2.HTML内容

<div class=\"slider fade\"> 
<div><div class=\"image\"><img src=\"img/fonz1.png\"/></div></div> 
<div><div class=\"image\"><img src=\"img/fonz2.png\"/></div></div> 
<div><div class=\"image\"><img src=\"img/fonz3.png\"/></div></div> 
</div>

3.函数调用

<script type=\"text/javascript\"> 
$(document).ready(function() { 
  $(\'.fade\').slick({ 
    dots: true, 
    infinite: true, 
    speed: 500, 
    fade: true, 
    slide: \'div\', 
    cssEase: \'linear\' 
  }); 
}); 
</script>

查看DEMO   立即下载

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/14175

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案