jquery 的3D Carousel插件参数说明

这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下。有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理。
1:首先需要创建一个ul对象,然后里面每一个li对象中的内容就是一个旋转的图形,第一个需要注意的就是img对象必须放在最前面,然后后面才跟其他内容。
<li>
<img src="data:images/content1.png" alt=""/>
<div class="tooltip">提示信息</div>
<data class="url">Real.aspx</data>
<data class="linkTarget">_self</data>
</li>
如上所写,img是选择的图片,tooltip是鼠标移动到图片上的提示信息,后面两个data节点的内容是我需要自定义的内容,请注意这里面必须定义class,然后在后面要使用该值时就使用class名称的属性名。
2:创建一个carousel对象
$("#carousel").carousel({
width: 400, //对象宽度
height: 200, //对象高度
itemWidth: ,
posterWidth: , //当前显示的图片的宽度
posterHeight: , //当前显示的图片的高度
horizontalRadius: , //图片左右滚动的半径
verticalRadius: , //图片上下滚动的半径
resize: false,
mouseScroll: false,
mouseDrag: true,
scaleRatio: 0.4,
scrollbar: false,
autoScroll: true,
tooltip: true,
itemClick: onItemClick, //自定义每个图片的点击事件
mouseWheel: true,
mouseWheelReverse: true
});
3:选择图片点击事件说明
function onItemClick(evt) {
window.location.href = evt.data.url;
}
在此特别说明:点击事件输入的evt对象,evt.data就是可以自定义的数据, 该控件默认有属性名:path,link,linkTarget,tooltip。属性名就是class名称,在火狐或chrome中定义了link和linkTarget属性,会自动弹出链接窗口。但是在IE8中没有。因此,我自定义了一个url的地址。在Click事件中进行自行处理。
jquery 的3D Carousel插件参数说明的更多相关文章
- jQuery插件之路(一)——试着给jQuery的一个Carousel插件添加新的功能
前几日在网上看到了一个关于Carousel插件的教学视频,于是也顺便跟着学习着做了一下.但是在做完之后发现,在别的网站上面看到类似的效果要比现在做的这个要多一个功能,也就是在底下会有一些按钮,当鼠标放 ...
- jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...
- 浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- Spark基础知识汇总
2,wordcount: val wordcount = sc.textFile()).reduceByKey(_ + _).sortByKey().collect val wordcount = s ...
- 手写一个allocator
似乎就像是一个计算机原理的实践.. 首先介绍一下大多数操作系统的内存架构..对于某个程序它会认为自己是独占了整个系统的所有内存在运行的这样才能方便移植,因此人们搞出了虚拟内存和物理内存的区别,于是人们 ...
- 在VisualStudio 编辑器文本替换中使用正则表达式
替换时使用正则表达式,其优点在于可以通过正则分组捕获,并在替换字符串中使用. 在VS2012之前的版本中,捕获内容用{}包含,引用时,使用 \1 形式: 在VS2012及以后版本中,捕获内容符合正则表 ...
- root切换
1.su -i root.password 2.su passwd root pass pass su pass 3.su -val 一般用户名 4.
- 基于TXT文本的简单图书管理系统
1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...
- SAP 订单状态跟踪
*&--------------------------------------------------------------------- *& Program name: *& ...
- c/c++ 缓冲区的刷新
利用string 对象查看缓冲区的变化,因为每个string对象在输入时会以空格作为分界. #include<iostream> #include<string> using ...
- 阿里云部署多个tomcat
转载自:http://www.cnblogs.com/lhj588/p/3805268.html 同时支持windows阿里云服务器 部署前准备: 1.到阿里云官网购买一台服务器 2.给阿里云服务器挂 ...
- js加密参数传给后台,后台解密base64
前台js // base64加密开始 var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + " ...
- centos 6.5 安装django
首先做这个:python安装setuptools http://blog.csdn.net/zhuying_linux/article/details/8167430 CentOS下将2.6升 ...