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>