featureCarousel.js 3d轮播图插件
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
- <script type="text/javascript">
- $(document).ready(function () {
- $("#carousel").featureCarousel({
- // include options like this:
- // (use quotes only for string values, and no trailing comma after last option)
- // option: value,
- // option: value
- });
- });
- </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轮播图插件的更多相关文章
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 原生JavaScript(js)手把手教你写轮播图插件(banner)
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
随机推荐
- Kubernetes-6.Service
docker version:20.10.2 kubernetes version:1.20.1 本文概述Kubernetes Service的基本原理和使用. 服务 Service是将运行在一组Po ...
- 记录core中GRPC长连接导致负载均衡不均衡问题 二,解决长连接问题
题外话: 1.这几天收到蔚来的面试邀请,但是自己没做准备,并且远程面试,还在上班时间,再加上老东家对我还不错.没想着换工作,导致在自己工位上做算法题不想被人看见,然后非常紧张.估计over了.不过没事 ...
- CCF(公共钥匙盒):思维+模拟
公共钥匙盒 201709-2 这题的思路一开始不是很清晰,一开始想用贪心去做.但是发现按照题目的思路不对.所以这里采用的是类似于多项式的加减的处理. #include<iostream> ...
- Excel查分系统搭建小技巧
推荐一个教师必备工具"Yichafen",是一个在线查分系统,全国8000所高校都在用,三分钟极速创建发布查分系统 在工作学习中,我们经常会遇到查分系统这样的问题.培根说过:读书足 ...
- FreeBSD NGINX TCP转发
前几天搞转发,研究了下TCP转发,现在记录下来 首先加载模块 注意:这是FreeBSD的位置.并且需要NGINX支持 load_module /usr/local/libexec/nginx/ngx_ ...
- Java 运行时数据区和内存模型
运行时数据区是指对 JVM 运行过程中涉及到的内存根据功能.目的进行的划分,而内存模型可以理解为对内存进行存取操作的过程定义.总是有人望文生义的将前者描述为 "Java 内存模型" ...
- Typora的一些快捷键
语法格式 快捷键 标题 # + 空格 = 一级标题, ## + 空格 =二级标题, 以此类推 shift + 数字1 =一级标题 ,shift + 数字2 =二级标题 , 以此类推 有序列表 1 ...
- Codeforces Round #574 (Div. 2) E. OpenStreetMap 【单调队列】
一.题目 OpenStreetMap 二.分析 对于二维空间找区间最小值,那么一维的很多好用的都无法用了,这里可以用单调队列进行查找. 先固定一个坐标,然后进行一维的单调队列操作,维护一个区间长度为$ ...
- 利用eigen库简单实现矩阵功能
eigen是目前运行速度较快的C++矩阵运算库,而且其轻便小巧安装方便的特点简直是吸引人啊!特做此笔记,记录一下这个安装简单.体积轻巧.功能强大的C++库. 1. Download and Insta ...
- 正则表达式如何直接在EXCEL中使用?
正则表达式,相信大家都不陌生.但在我们最常用的办公软件EXCEL中,目前没有可直接使用正则表达式的函数(至少10版本的EXCEL没有),那么今天我就分享下如何在EXCEL中自定义正则函数. 一.提需求 ...