首页 > 代码库 > jquery 的3D Carousel插件参数说明
jquery 的3D Carousel插件参数说明
这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下。有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理。
1:首先需要创建一个ul对象,然后里面每一个li对象中的内容就是一个旋转的图形,第一个需要注意的就是img对象必须放在最前面,然后后面才跟其他内容。
<li> <img src=http://www.mamicode.com/"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事件中进行自行处理。
jquery 的3D Carousel插件参数说明
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。