jquery carousel插件

很久没有接触jQuery了,公司使用的也全部是YUI,之前写过一个基于YUI2.6的一个“旋转木马”(俗称焦点切换效果)的插件,最终整个插件相对比较臃肿,加上插件本身对animation等库的依赖,使用起来也是比较纠结,常常要为了一个功能多引入20多KB的js代码。这几天尝试了用jQuery来实现carousel的效果(类似的叫法还有slider show),感觉十分轻巧灵活,不过花的时间不是很多,因为其中的代码有很大一部分是直接从YUI的实现中移植过来。

View Demo View Sources

部分代码示例:

html:


CSS

.carousel-wp{width:590px;height:200px;overflow:hidden;border:1px solid #fff;position:relative;}
.control-nav{margin:10px auto;width:590px;text-align:center;}
.control-nav a{display:inline-block;height:22px;width:22px;border:none;background:url(images/bullets.png) no-repeat 0 0;cursor:pointer;}
.control-nav a:focus{outline:none;}
.control-nav a.current{background-position:0 -22px;}

script

$("#carousel-wp").carousel({
	itemContainer : "#item-wp",			
	navContainer : "#control-nav" ,
	animTime  : 0.4,	
	navTriggerTime : 1000,
	easeEffect : "easeOutCirc" ,	
	orientation : "top"
});

View Demo View Sources

其他人实现的jQuery Carousel参考:

  1. Jan Sorgalla – Riding carousels with jQuery
  2. best-jquery-carousels-plugins

最后,这类插件实在太多太多,我个人比较喜欢既能满足需求又能灵活易扩展,我写的这些还有很多不足之处,代码我放到github上,地址:https://github.com/aobo711/jQuery-Carousel,欢迎大家来帮我改进质量。

Published by

Z.J.T

Product Designer from Wandou Labs

  • http://www.swordair.com/blog 葵中剑

    效果不错哟~

  • alexorz

    擦,居然能从股沟找到这里….
    用jq的话有stop方法就不会出现PP的banner那样的问题了

    • http://fordifferent.com Z.J.T

      好好搞你学校的事情。。。别玩PSP了

  • http://www.rerhvrer-tzui.info Waldo Ronnfeldt

    I know I’m a bit past due in contributing my concepts but it particular publish developed me believe. It was an absorbing weblog post. I possess get a regular reader of one’s world wide web site since I stumbled on your site a though back again once more. I cannot say which I agree with every thing you mentioned having said that it is emphatically enlightening! I could most likely be again once again once again soon.