万博体育最新资讯

UX和所有东西网络

TinyRotator–jQuery的一个微型图像旋转器插件

为了 我最近做的一个项目为jquery创建了一个简单的小图像旋转器插件。它非常容易嵌入到你自己的页面中,并按照你想要的方式使用常规的CSS。

该插件在两种情况下都被释放MIT和GPL许可证所以你可以在个人和商业项目中任意使用它。

如何使用它

首先,你需要包括小型旋转机械jquery.tinyrotator.js查询.tinyrotator.js文档中的文件。样式表将为您提供一个标准的设计,但您可以通过更改CSS文件轻松地对其进行更改。因为它是一个jquery插件,所以您当然也必须包含jquery库。

插件的基础是一个无序的图像列表,其中包含指向更大图像的链接。列表应该有class=“t旋转器”从样式表中获取正确的样式。如果您创建自己的自定义CSS,当然可以使用其他类(或ID)。


          

然后通过调用列表中的tinyrotator方法激活插件,如下所示:

$(document).ready(function()$('.tinyRotator').tinyRotator();(});

这将产生一个标准的图像旋转器与您的列表中的图像。该插件将在缩略图上方显示更大版本的图像,并自动循环浏览它们。如果用户单击缩略图,将显示该图像,插件将停止旋转。

Tinyrotator的标准版本

优雅的退化

如果出于某种原因插件无法初始化(用户已打开javascript,jquery-din不加载,等)可点击的图像列表仍然可见,用户可以点击它们观看更大的图像。但是,它们将在空白页上打开。

禁用javascript的TinyRotator

选项

该插件有两个选项,您可以使用它们设置每个图像的可见时间以及两个图像之间的转换(淡入)速度。

间隔
显示每个图像的时间(毫秒)
默认值为5000。
褪色
褪色的速度,可能的值是:“快速”,“慢”,“中等”,“无”或时间(毫秒)
默认值为“中”

下面是一个例子,其中间隔和衰减速度都有更快的速度。

$(document).ready(function()$('.tinyrotator').tinyrotator(interval:2000,fade:'fast');(});

一定要查看演示以查看插件的运行情况。还可以查看演示页面的源代码以了解如何使用它。

反馈

我希望你能找到有用的插件。如果您对如何改进插件有任何建议,请在评论中告诉我。maxbetx另外,如果你在一个项目上使用它,如果你让我知道它总是很有趣的。

4评论maxbetx

  1. 好的。

  2. 你好。感谢这个漂亮小巧的插件,我用它了网址:http://www.surimmo.fr(这是一个法国房地产爬虫)。

  3. 你好。对不起的,“视图演示”链接运行到一个死端信息->“此页丢失”

留下答复

您的电子邮件地址将不会发布。

*

专利文献2019万博体育最新资讯

主题通过安德斯诺伦-向上