资讯频道 → Web前端
阅读更多

1顶
1踩

Web前端

翻译新闻 9 款超棒的jQuery“旋转木马”插件和教程推荐

2012-02-29 16:02 by 正式编辑 sherry617 评论(3) 有15370人浏览
jquery Carousel 插件
Web设计技术日新月异，开发者和设计师都应该了解最新的设计趋势。目前，“旋转木马”是一种比较流行的图片切换效果，这是一个在水平/垂直方向上动态滚动的列表，能让用户方便地访问到不同的内容，使用这个效果既可以提高网站的可用性，又能吸引用户。

使用jQuery就可以实现各种各样的旋转木马效果，而且在很多方面都优于Flash，这对于Web设计师来说非常值得尝试。本文为大家介绍9款好用的旋转木马插件和教程，让大家在了解这个效果的基础上优化自己的网站。

1. JCarousel

这个插件有设置图片滚动（水平/垂直）效果的功能。无论图片是静态HTML内容或有/无Ajax加载能力，都可以来回滚动。



2. Cloud Carousel： 3D旋转木马效果插件

这个可以替代Flash的插件有很多优点：易整合、文件小、可以进行搜索引擎优化、具备可访问性。



3. jQuery MS Carousel

这款插件可以用于DIV、LI或任何HTML标签上。当点击上一张或下一张按钮时，就可以返回到其中的某张图片，实现用户自由操作的功能。



4. Floom

Floom能够以非常独特的方式（百叶窗效果）在网站上展示幻灯片。该插件基于MooTools 1.2。



5. Roundabout For jQuery

这个插件能够将无序列表、无序HTML结构转化为有吸引力、集娱乐性与互动性的类似转盘一样的区域结构，使用大量API实现高度可定制。Roundabout是基于jQuery的插件，适用于所有主流浏览器。



6. WOW Slider

顾名思义，这是一个视觉效果很棒的jQuery图片滑动插件，可以实现的效果有：Blast、Fly、Blinds、Squares、Slices、Basic、Fade、Ken Burns、Stack、 Stack vertical、Basic linear等，还有大量的专业模板。通过这个插件，你可以在短时间内创建滑块，不需要编程或编辑图片——这均得益于point-and-click向导。同时该插件也支持WordPress的滑动插件和Joomla的滑动模块。



7. Carousel Slideshow

Carousel Slideshow是一个DHTML脚本，能以特别的方式在网站上呈现图片，包括3D和旋转木马效果。你可以根据自己的想法来设计滑块，比如从右到左滑动或反向滑动；设置4面、6面、8面或12面展示；为每张图片添加链接；设置鼠标悬停等等。该脚本基于DOM，能在主流的DHTML浏览器上使用。



8. 用 jQuery 和 CSS创建马赛克幻灯片

只有新颖的东西才能吸引用户并留住用户。因此，本教程将介绍如何用jQuery和CSS做出马赛克图片廊。当图片切换时，将会出现一个炫丽的拼贴过渡效果。



9. jQuery Carousel 插件

很多能实现旋转木马效果的插件不是要求非语义标记就是有额外的大文件，不过jQuery的这款插件不存在这些问题，它使用方便，易于上手，而且非常实用。



原文链接：9 Awesome Free jQuery Carousel Plugins and Tutorials
  • 大小: 109.9 KB
  • 大小: 334.2 KB
  • 大小: 250.6 KB
  • 大小: 20.8 KB
  • 大小: 154 KB
  • 大小: 212.1 KB
  • 大小: 256.3 KB
  • 大小: 208.5 KB
  • 大小: 240.6 KB
1
顶
1
踩
评论 共 3 条 请登录后发表评论
3 楼 Xiqincai 2015-12-08 18:02
GoEasy推送支持Java后台推送，JS推送，Android推送，兼容浏览器有IE6,7,8,9,10,11, Firefox, safari, chrome,推送稳定，速度快，上手快，java后台推送只需要两行代码， js前端推送也只需要3，4行，而且文档齐全，还提供了后台查询信息收发情况.
GoEasy官网：goeasy.io
快速入门：goeasy.io/www/started.jsp
文档：goeasy.io/www/docs.jsp
参考代码示例：
my.oschina.net/u/2544092/blog/540663
2 楼 lufam 2012-03-06 23:00
很好，很强大
1 楼 tommet 2012-02-29 17:56
确实很炫，不过感觉用不上

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics