帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+CSS3 3D响应式多形式图片切换展示插件

帝国模板之家 2020-12-02 网页特效 评论

插件介绍

这是一款支持触摸图片展示jQuery插件,能够很好的兼容移动端显示。它使用CSS3 3D变换和翻转效果创建图片封面流效果。有多种切换形式,比如车轮切换,旋转木马等切换方式。IE7、IE8、IE9不支持CSS3 3D变换。

使用方法

1. 在html页面中加载jquery库和插件文件。

<link href="jquery.flipster.min.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery.flipster.min.js"></script>

2. 创建图片容器代码。

<div id="coverflow">
  <ul class="flip-items">
    <li data-flip-title="Title 1">
      <img src="1.png">
    </li>
    <li data-flip-title="Title 2">
      <img src="2.png">
    </li>
    <li data-flip-title="Title 3">
      <img src="3.png">
    </li>
    ...
  </ul>
</div>

3. 插件初始化

$(function(){
  var coverflow = $("#coverflow").flipster();
});

4. 通知自定义属性,用户可以通过单击导航链接在不同类别的图片之间切换。

<div id="coverflow">
  <ul class="flip-items">
    <li data-flip-title="Title 1" data-flip-category="Greens">
      <img src="1.png">
    </li>
    <li data-flip-title="Title 2" data-flip-category="Reds">
      <img src="2.png">
    </li>
    <li data-flip-title="Title 3" data-flip-category="Blacks">
      <img src="3.png">
    </li>
    ...
  </ul>
</div>

5. 默认选项和回调方法。

$(".coverflow").flipster({

  // Container for the flippin' items.
  itemContainer:    'ul', 

  // Selector for children of itemContainer to flip
  itemSelector:     'li', 

  // 'coverflow' or 'carousel' or 'flat' or 'wheel'
  style:'coverflow', 

  // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.
  start:'center', 

  // Fading speed
  fadeIn: 400,

  // Infinite loop
  loop: false,

  // Enable autoplay
  autoplay: false,

  // Enable pause on hover
  pauseOnHover: true,

  // Space between items
  spacing: -0.6,

  // Switch between items with click
  click: true,

  // Enable left/right arrow navigation
  keyboard:   true, 

  // Enable scrollwheel navigation (up = left, down = right)
  scrollwheel: true, 

  // Enable swipe navigation for touch devices
  touch:      true, 

  // If true, flipster will insert an unordered list of the slides
  nav:        false, 

  // If true, flipster will insert Previous / Next buttons
  buttons: false, 

  // Changes the text for the Previous button
  buttonPrev:         'Previous',       

  // Changes the text for the Next button
  buttonNext:         'next'

  // Callback function when items are switches
  onItemSwitch:     $.noop

});

6. API方法.

// goto next
instance.flipster('next');

// back to previous
instance.flipster('prev');

// goto a specific index
instance.flipster('jump', 0);

// goto a specific item
instance.flipster('jump', $('.my-item'));

// resume autoplay
instance.flipster('play');

// autoplay duration
instance.flipster('play', 5000); 

// pause autoplay
instance.flipster('pause');

// stop autoplay
instance.flipster('stop');

// re-index
instance.flipster('index');
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言