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: 20,posterWidth: 340, //当前显示的图片的宽度posterHeight: 200, //当前显示的图片的高度horizontalRadius: 370, //图片左右滚动的半径verticalRadius: 100,   //图片上下滚动的半径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事件中进行自行处理。

转载于:https://www.cnblogs.com/coolsundy/p/5888327.html

jquery 的3D Carousel插件参数说明相关推荐

html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
jQuery之浏览器打印插件
1.jQuery.print.js打印插件地址:https://github.com/DoersGuild/jQuery.print 该打印插件适用于局部打印基础使用方法 $(selector). ...
支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...

jquery 的3D Carousel插件参数说明

jquery 的3D Carousel插件参数说明相关推荐

最新文章

热门文章