jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件。 点击这里进入原文

插件特点:

1.处理div的3d旋转木马效果。

2.支持一个中心,2个侧面的功能

3.中心区域可点击

4.显示隐藏文本功能(可以使用css显示在图片的任何位置)

5.可以修改速度,效果,等很多的参数。

6.支持 Chrome,FireFox,Safari和IE6 +浏览器。

7.需要 jquery v1.3+

8.支持图片预加载

怎么使用:

1.引入jQuery v1.3+和 carousel.js文件

2.引入相应的css文件

3.格式化你的html。

4.如下启用你的carousel.js

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("#carousel").featureCarousel({
  4. // include options like this:
  5. // (use quotes only for string values, and no trailing comma after last option)
  6. // option: value,
  7. // option: value
  8. });
  9. });
  10. </script>

配置参数:

名称 描述 类型 默认值
largeFeatureWidth 3种情况,“0”意思是宽度按原始尺寸显示,“0” “1”之间实际宽度原始宽度乘以此值,大于“1”,可以自定义宽度 integer 0
largeFeatureHeight 同上,为图片的高度 integer 0
smallFeatureWidth 3种情况,“0”意思是宽度按原始尺寸显示,“0” “1”之间实际宽度原始宽度乘以此值,大于“1”,可以自定义宽度 integer 0.5
smallFeatureHeight 同上,改为高度 integer 0.5
topPadding 距离外围容器上方padding值 integer 20
sidePadding 距离外围容器左右padding值 integer 50
smallFeatureOffset 两侧内容举例容器的举例 integer 50
startingFeature 放在中心的序列号 integer 1
carouselSpeed 完成一个旋转木马的时间 integer 1000
autoPlay 大于0的话,为旋转木马的运行间隔时间。等于0表示不自动运行 integer 4000
pauseOnHove 鼠标放上去暂定 boolean true
OnHover 鼠标放上去停止 boolean false
stoptrackerIndividual   boolean true
trackerSummation   boolean true
preload   boolean true
displayCutoff   integer 0
animationEasing 缓存效果(和easing 插件配合使用) string 'swing'
leftButtonTag 左滚动的按钮 string '#carousel-left
rightButtonTag 右滚动的按钮 string '#carousel-right'
captionBelow 标题在图片下方 boolean false
movedToCenter 移入中心触发的回调函数 function $.noop
leavingCenter 偏离中心触发的回调函数 function $.noop
clickedCenter 点击中间的链接触发的回调函数 function $.noop

featureCarousel.js 3d轮播图插件的更多相关文章

  1. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  2. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  4. 原生JavaScript(js)手把手教你写轮播图插件(banner)

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  5. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  6. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  7. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  8. 第124天:移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  9. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. 001-深度学习Pytorch环境搭建(Anaconda , PyCharm导入)

    001-深度学习Pytorch环境搭建(Anaconda , PyCharm导入) 在开始搭建之前我们先说一下本次主要安装的东西有哪些. anaconda 3:第三方包管理软件. 这个玩意可以看作是一 ...

  2. Docker搭建HAproxy+tomcat 实现高可用

    构建业务镜像1创建tomcat-app1和tomcat-app2两个目录,代表不同的两个基于tomcat的业务.准备tomcat的配置文件[root@localhost ~]#mkdir -p /da ...

  3. C#开发BIMFACE系列37 网页集成开发1:审图系统中加载模型或图纸

    系列目录     [已更新最新开发文章,点击查看详细] 在之前的<C#开发BIMFACE系列>中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程. 服务端API测试通 ...

  4. 【codeforces - 1307G】Cow and Exercise

    目录 description solution accepted code details description 给定 n 点 m 边简单有向图,有边权. q 次询问,每次给出 xi.可以增加某些边 ...

  5. SPOJ QTree【树链剖分】

    一 题目 QTREE 二 分析 第一道树链剖分的题,写的好艰难啊. 题意还是比较好理解的,就是在树上操作. 对于修改,题中要求的是单点修改,就算是直接树上操作也是非常简单的. 对于查询,查询的时候,是 ...

  6. Linux 三剑客之 awk 实战详解教程

    我们知道 Linux 三剑客,它们分别是:grep.sed.awk.在前边已经讲过 grep 和 sed,没看过的同学可以直接点击阅读,今天要分享的是更为强大的 awk. sed 可以实现非交互式的字 ...

  7. Linux入门视频笔记一(基本命令)

    一.简单命令 1.date:当前时间 2.cal:当前日期(日历格式) ①cal 2019:2019年全年日历 ②cal 1 2019:2019年1月份 二.Linux文件结构 1.根目录:root( ...

  8. MySQL的安装及使用

    安装MySQL 这里建议大家使用压缩版,安装快,方便.不复杂. 1.MySQL软件下载 mysql5.7 64位下载地址: https://dev.mysql.com/get/Downloads/My ...

  9. Topshelf一个用于使用.NET构建Windows服务框架

    1 Topshelf是什么? Topshelf是用于托管使用.NET框架编写的Windows服务的框架.服务的创建得到简化,从而使开发人员可以创建一个简单的控制台应用程序,可以使用Topshelf将其 ...

  10. 【死磕JVM】给同事讲了一遍GC后,他要去面试,年轻人,就是容易冲动!

    前言 在一个风和日丽的中午,和同事小勇一起走在公司楼下的小公园里面,看到很多的小姐姐,心想什么时候能够和这些小姐姐一起讨论人生呀,美滋滋,嘿嘿嘿. 收起你的哈喇子好不好,小勇总是在这个时候发出声音,挺 ...