jQuery响应式3D旋转木马插件mk-3Dcarousel

所属分类:媒体-幻灯片和轮播图

 33433  352  查看评论 (3)
分享到微信朋友圈
X
jQuery响应式3D旋转木马插件mk-3Dcarousel ie兼容10

使用方法

mk-3Dcarousel是一款带图片倒影效果的响应式3D旋转木马jQuery插件。该旋转木马使用简单,可以生成非常漂亮的图片倒影效果,可以在所有最新版本的现代浏览器中正常工作。

该旋转木马插件在小屏幕中会以另一种不同的风格进行图片展示。

 使用方法

使用该3D旋转木马插件需要引入jQuerymk-3Dcarousel.jsmk-3Dcarousel.css文件。

<link rel="stylesheet" href="css/mk-3Dcarousel.css">
<script src="js/jquery.min.js"></script>
<script src="js/mk-3Dcarousel.js"></script>

 HTML结构

mk-3Dcarousel 3D旋转木马插件的HTML结构非常简单:使用一个<div>元素作为包裹容器,里面放置需要的图片即可。

<div class="mk-carousel" id="mkCarousel">
    <img class="active" src="images/carousel/001.png" alt="">
    <img src="images/carousel/002.png" alt="">
    <img src="images/carousel/003.png" alt="">
    <img src="images/carousel/004.png" alt="">
    <img src="images/carousel/005.png" alt="">
    <img src="images/carousel/006.png" alt="">
    <img src="images/carousel/007.png" alt="">
    <img src="images/carousel/008.png" alt="">
</div>

 初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该3d旋转木马插件。

$(function(){
    $('#mkCarousel').mkCarousel();
});

 配置参数

该3d旋转木马插件有以下一些可用的配置参数:

  1. responsive:是否开启响应式效果,默认值为true。

  2. breakpoint:响应式断点,默认值为768。

  3. offset:偏移值(桌面设备),默认值为100。

  4. mobileOffset:偏移值(移动手机),默认值为50。

  5. controlNavs:是否显示导航控制,默认值为true。

相关插件-幻灯片和轮播图

好看的动画切换,底部带进度条

jQuery全屏进度条自动切换有随机切换轮播图
  幻灯片和轮播图
 27484  337

有道的banner轮播切换效果js实例

基于swiper的banner切换效果js实例,自适应轮播图
  幻灯片和轮播图
 49074  460

jQuery图片轮播插件jquery.tiles.js

jquery.tiles图片切换插件,支持多达12种特效、22个自定义参数;支持随机顺序、循环、正反方向、导航、缩略图;幻灯片播放前、中、后自定义事件等,相信可以满足绝大多数需求。
  幻灯片和轮播图
 30469  372

jQuery轮播图/内容滑块插件Quake Slider

jQuery轮播图插件Quake Slider提供了24种过渡效果。
  幻灯片和轮播图
 33409  408

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小呵 0
    2018/8/31 17:20:22
    0
    2017/5/19 14:36:03

    您好,我想问问,如何在一个页面使用多个您写的这个轮播呢?

    回复
    BGL 0
    2017/4/8 11:44:56

    很详细,学习了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复