jquery 的3D Carousel插件参数说明

时间:2022-10-27 08:34:39

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

  1. jQuery插件之路&lpar;一&rpar;——试着给jQuery的一个Carousel插件添加新的功能

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

  2. jQuery仿3D旋转木马效果插件&lpar;带索引按钮&rpar;

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

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

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

  4. 20&plus;功能强大的jQuery&sol;CSS3图片特效插件

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

  5. &lpar;转&rpar;强大的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. varnish esi出现no esi processing&comma; first char not &OpenCurlyQuote;&lt&semi;’的错误处理方式

    大致意思是varnish的ESI使用mod_deflate来处理可以接受含有请求头Accept-Encoding的请求,这样转发到后端服务器后,后端服务器返回的响应内容就不是一个格式良好的XML或ht ...

  2. Asp&period;Net的核心对象

    原文地址:http://www.cnblogs.com/fish-li/archive/2011/08/21/2148640.html 1.HttpRuntime 对象在处理Http请求的asp.ne ...

  3. &lbrack;C&plus;&plus;&rsqb;Saving the Universe——Google Code Jam Qualification Round 2008

    Google Code Jam 2008 资格赛的第一题:Saving the Universe. 问题描述如下: Problem The urban legend goes that if you ...

  4. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  5. Next week plan

    1.get a job 2.write a high performance chatroom with encryption.  Use scala. Next Week turn to Rust

  6. 基于VUE选择上传图片并在页面显示(图片可删除)

    demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...

  7. Html开发中document&period;getElementByTagName无法找到所有DOM元素的问题解决方法

    let eleList = document.querySelectorAll('li') for (let i = 0; i < eleList.length; i++) { // 遍历操作 ...

  8. 2019&period;4&period;1 JMeter中文乱码解决方案

    1)添加一个HTTP信息头管理器:添加Accept:application/xml;application/json;charset=utf-8 2)参数为中文:在HTTP请求时设置编码格式为utf- ...

  9. SolidWorks基础-快速入门

    SolidWorks 介绍 SolidWorks 是一款机械设计自动化软件包 用于设计与分析机械结构 SolidWorks主要是工程师表达自己思想的工具 学习 SolidWorks 的方法 找一个基础 ...

  10. Ubuntu下三种方法设置环境变量

    一种用于当前终端,一种用于当前用户,一种用于所有用户: 用于当前终端: 在当前终端中输入:export PATH=$PATH:<你的要加入的路径> 不过上面的方法只适用于当前终端,一旦当前 ...