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

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. SDN/NFV运营商商业化部署

    三大运营商发布未来网络架构,并逐步加快SDN/NFV商业化部署的步伐.中国联通发布其新一代网络架构<CUBE-Net 2.0白皮书>,并与20多家合作伙伴共同启动了“新一代网络”合作研发计 ...

  2. CRUD操作

    1.增加 insert into 表名 values(列的值,列的值) insert into 表名(列名,列名)valuse(值,值) 2.删除 delete from 表明 delete from ...

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

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

  4. C++基础知识面试精选100题系列(11-20题)[C++ basics]

    [原文链接] http://www.cnblogs.com/hellogiser/p/100-interview-questions-of-cplusplus-basics-11-20.html [题 ...

  5. Sublime Text 2下搭建Python环境常见错误

    Sublime Text 2下搭建Python环境时,最容易出的错误就是Python环境配置错误,导致build(Ctrl+B)后没有任何反应. 关于Python编程环境的配置,网上很容易搜索到.先默 ...

  6. nginx+fastcgi+c/cpp

    参考:http://github.tiankonguse.com/blog/2015/01/19/cgi-nginx-three/ 跟着做了一遍,然后根据记忆写的,不清楚有没错漏步骤,希望多多评论多多 ...

  7. 【jQuery】--图片轮播

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

  8. 学号20145332 《信息安全系统设计基础》实验五 简单嵌入式WEB服务器实验

    实验目的 掌握在 ARM 开发板实现一个简单 WEB 服务器的过程. 学习在 ARM 开发板上的 SOCKET 网络编程. 学习 Linux 下的 signal()函数的使用. 实验内容 学习使用 s ...

  9. 数据库邮件服务器中sp_send_dbmail的参数使用

    sp_send_dbmail [ [ @profile_name = ] 'profile_name' ]     [ , [ @recipients = ] 'recipients [ ; n ]' ...

  10. JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...