这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下。有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理。

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插件参数说明的更多相关文章

  1. jQuery插件之路(一)——试着给jQuery的一个Carousel插件添加新的功能

    前几日在网上看到了一个关于Carousel插件的教学视频,于是也顺便跟着学习着做了一下.但是在做完之后发现,在别的网站上面看到类似的效果要比现在做的这个要多一个功能,也就是在底下会有一些按钮,当鼠标放 ...

  2. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  4. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  5. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  6. 浅谈jQuery Pagination Ajax 分页插件的使用

    插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...

  7. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  8. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. C# I/O

    获取运行时的动态目录 private static string GetDataDir_Data() { var parent = Directory.GetParent(Directory.GetC ...

  2. [转]大数据时代,python竟是最好的语言?

      随着大数据疯狂的浪潮,新生代的工具Python得到了前所未有的爆发.简洁.开源是这款工具吸引了众多粉丝的原因.目前Python最热的领域,非数据分析和挖掘莫属了.从以Pandas为代表的数据分析领 ...

  3. typeScence

  4. php二进制安全的含义

    PHP里,有string的概念.string里,每个字符的大小为byte(与PHP相比,Java的每个字符为Character,是UTF8字符,C语言的每个字符可以在编译时选择). byte里,有AS ...

  5. C#递归、动态规划计算斐波那契数列

    //递归         public static long recurFib(int num)         {             if (num < 2)              ...

  6. Mahout推荐算法API详解

    转载自:http://blog.fens.me/mahout-recommendation-api/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, ...

  7. Lintcode 469. 等价二叉树

    ----------------------------------------------- AC代码: /** * Definition of TreeNode: * public class T ...

  8. MongoDB 安装及其配置

    安装: 安装路径d:MongoDB较短便于后续操作 配置: 1.新建data文件夹并在data文件夹下新建db和log文件夹,路径如下 MongoDB\data\db MongoDB\data\log ...

  9. 用winform程序来了解委托和事件

    一.浅谈委托 如果有个过winform 和webform 程序开发的小伙伴一定有个这样的感觉吧,点击Button直接就执行了那个方法,到此他是怎么实现了的呢,大家有考虑过没有? 回到正题,什么是委托呢 ...

  10. 【Java EE 学习 55】【酒店会员管理系统项目总结】

    本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...