幻灯片/轮播

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

面包多

基于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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!