幻灯片/轮播

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

创客主机


这是一款基于slick旋转木马插件来制作的jQuery幻灯片特效。该幻灯片特效使用缩放和淡入淡出的过渡动画效果,它支持移动触摸设备,效果非常炫酷。slick是一款支持移动设备的旋转木马插件。slick功能强大,它提供众多的参数,使你能够轻松的制作出各种旋转木马和幻灯片特效。

使用方法:

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

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

HTML结构:

该幻灯片的HTML结构如下:

  1. <div class="slideshow">
  2.   <div class="slider">
  3.     <div class="item">
  4.       <img src="1.jpg" />
  5.     </div>
  6.     <div class="item">
  7.       <img src="2.jpg" />
  8.     </div>
  9.     <div class="item">
  10.       <img src="3.jpg" />
  11.     </div>
  12.     <div class="item">
  13.       <img src="4.jpg" />
  14.     </div>
  15.   </div>
  16. </div>

CSS样式:

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

  1. .slideshow {
  2.   position: relative;
  3.   z-index: 1;
  4.   height: 100%;
  5.   max-width: 700px;
  6.   margin: 50px auto;
  7. }
  8. .slideshow * {
  9.   outline: none;
  10. }
  11. .slideshow .slider {
  12.   box-shadow: 0 20px 50px -25px black;
  13. }
  14. .slideshow .slider-track {
  15.   -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  16.   transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  17. }
  18. .slideshow .item {
  19.   height: 100%;
  20.   position: relative;
  21.   z-index: 1;
  22. }
  23. .slideshow .item img {
  24.   width: 100%;
  25.   -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  26.   transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  27.   -webkit-transform: scale(1.2);
  28.           transform: scale(1.2);
  29. }
  30. .slideshow .item.slick-active img {
  31.   -webkit-transform: scale(1);
  32.           transform: scale(1);
  33. }

初始化插件:

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

  1. $('.slider').slick({
  2.     autoplay:true,
  3.     autoplaySpeed:3000,
  4.     draggable: true,
  5.     arrows: false,
  6.     dots: true,
  7.     fade: true,
  8.     speed: 900,
  9.     infinite: true,
  10.     cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
  11.     touchThreshold: 100
  12. })
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!