基于slick插件的jQuery幻灯片特效

这是一款基于slick旋转木马插件来制作的jQuery幻灯片特效。该幻灯片特效使用缩放和淡入淡出的过渡动画效果，它支持移动触摸设备，效果非常炫酷。

slick是一款支持移动设备的旋转木马插件。slick功能强大，它提供众多的参数，使你能够轻松的制作出各种旋转木马和幻灯片特效。

使用方法

在页面中引入slick插件的相关文件。

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<script src='js/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>                  
                

HTML结构

该幻灯片的HTML结构如下：

<div class="slideshow">
  <div class="slider">
    <div class="item">
      <img src="1.jpg" />
    </div>
    <div class="item">
      <img src="2.jpg" />
    </div>
    <div class="item">
      <img src="3.jpg" />
    </div>
    <div class="item">
      <img src="4.jpg" />
    </div>
  </div>
</div>     
                

CSS样式

为幻灯片添加下面的必要CSS样式：幻灯片的过渡动画使用自定义的贝兹曲线函数。另外图片默认被放大1.2倍，当前激活的图片会被添加.slick-active class，此时图片被缩放会原来的大小。

.slideshow {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  margin: 50px auto;
}
.slideshow * {
  outline: none;
}
.slideshow .slider {
  box-shadow: 0 20px 50px -25px black;
}
.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow .item.slick-active img {
  -webkit-transform: scale(1);
          transform: scale(1);
}                
                

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化slick插件。

$('.slider').slick({
    autoplay:true,
    autoplaySpeed:3000,
    draggable: true,
    arrows: false,
    dots: true,
    fade: true,
    speed: 900,
    infinite: true,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    touchThreshold: 100
})