jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第12章.pptVIP

2．使用jquery.banner.js插件 jquery.banner.js插件可以实现自定义动画效果的广告条，方法如下： 广告条容器div元素对应的jQuery对象.banner({ steps : steps:[step1,step2,...,stepN], total_steps : 步骤的数量, speed : 每个步骤中动画转换的时间，单位为ms }); 广告条可以分为若干的区域 以网页上方正中的广告条为例说明。该广告条分为3个区域ca_zone1、ca_zone2和ca_zone3，定义如下： div id=ca_banner1 class=ca_banner ca_banner1 div class=ca_slide ca_bg1 div class=ca_zone ca_zone1!--Product-- div class=ca_wrap ca_wrap1 img src=images/product1.png class=ca_shown alt=/ img src=images/product2.png alt= style=display:none;/ img src=images/product3.png alt= style=display:none;/ img src=images/product4.png alt= style=display:none;/ img src=images/product5.png alt= style=display:none;/ /div /div 接上 div class=ca_zone ca_zone2!--Line-- div class=ca_wrap ca_wrap2 img src=images/line1.png class=ca_shown alt=/ img src=images/line2.png alt= style=display:none;/ /div /div div class=ca_zone ca_zone3!--Title-- div class=ca_wrap ca_wrap3 img src=images/title1.png class=ca_shown alt= / img src=images/title2.png alt= style=display:none;/ img src=images/title3.png alt= style=display:none;/ /div /div /div 这3个区域在广告条中的位置 动画转换步骤的格式 [{to : 显示的图片序号字符串}, {effect: 动画转换效果字符串}], // 出现在steps属性中的顺序决定了对应的区域 广告条ca_banner1动画特效的代码 $(#ca_banner1).banner({ steps : [ [ //1 step: [{to : 2}, {effect: zoomOutRotated-zoomInRotated}], [{to : 1}, {}], [{to : 2}, {effect: slideOutRight-slideInRight}] ], [ //2 step: [{to : 3}, {effect:slideOutTop-slideInTop}], [{to : 1}, {}], [{to : 2}, {}] ], [ //3 step: [{to : 4}, {effect: zoomOut-zoomIn}], [{to : 2}, {effect: slideOutRight-slideInRight}], [{to : 2}, {}] ], 接上 [ //4 step [{to : 5}, {effect: slideOutBottom-slideInTop}], [{to : 2}, {}], [{to : 3}, {effect: zoomOut-zoomIn}] ], [ //5 step [{to : 1}, {effect: slideOutLeft-slideInLeft}], [{to : 1}, {effect: zoomOut-zoomIn}], [{to : 1}, {effect: slideOutRight-slideInRight}] ] ], total_steps : 5, s