描述：jquery广告横幅插件制作类似flash或者gif动画广告可以自定义横幅通栏大小。
图片展示：
兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：无
JS下载：http://www.ijquery.cn/js/jquery.banner.js
预览： http://www.ijquery.cn/study/demo/banner
打包下载：http://www.ijquery.cn/study/demo/banner/banner.zip
参数说明：
steps : [], 每个步骤的过渡效果
total_steps : 5, 总共的步骤
speed : 3000 过渡的速度
JS引用代码：
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.banner.js"></script>
<script type="text/javascript">
$(function() {
$('#ca_banner1').banner({
steps : [
[
//第一个过渡效果:1、3过渡，2停
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//第二个过渡效果:1过渡，2、3停
[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {}]
],
[
//第三个过渡效果:1、2过渡，3停
[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "2"}, {}]
],
[
//第四个过渡效果:1、3过渡，2停
[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
[{"to" : "2"}, {}],
[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
],
[
//第五个过渡效果:1、2、3过渡
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
]
],
total_steps : 5,
speed : 3000
});
});
</script>
[/js]
HTML代码：
[html]
<div>
<div id="ca_banner1">
<div>
<!--1图片产品-->
<div>
<div>
<div></div>
<div style="display:none;"></div>
<div style="display:none;"></div>
<div style="display:none;"></div>
<div style="display:none;"></div>
<div style="display:none;"></div>
</div>
</div>
<!--2图片内容-->
<div>
<div>
<div></div>
<div style="display:none;"></div>
</div>
</div>
<!--3图片标题-->
<div>
<div>
<div></div>
<div style="display:none;"></div>
<div style="display:none;"></div>
</div>
</div>
</div>
</div>
</div>
[/html]
CSS代码：
[css]
.banner{width:650px;margin:0 auto;}
.ca_banner{position:relative;overflow:hidden;background:#f0f0f0;padding:10px;border:1px solid #fff;-moz-box-shadow:0px 0px 2px #aaa inset;}
.ca_slide{width:650px;height:300px;position:relative;overflow:hidden;}
.ca_zone{position:absolute;width:650px;}
.ca_wrap{display:table-cell;vertical-align:middle;text-align:center;}
/* Banner1产品的自定义样式 */
.ca_banner1{width:650px;height:300px;}
.ca_bg1{background:#fff url(images/bg.jpg) no-repeat top left;}
.ca_banner1 .ca_zone1{top:0px;left:0px;}
.ca_banner1 .ca_wrap1{width:320px;height:300px;}
.ca_banner1 .ca_zone2{top:100px;left:240px;}
.ca_banner1 .ca_wrap2{width:387px;height:203px;}
.ca_banner1 .ca_zone3{top:32px;left:250px;}
.ca_banner1 .ca_wrap3{width:378px;height:31px;}
/* picimg */
.picimg{width:321px;height:300px;overflow:hidden;}
.img01{background:url(images/product1.png) no-repeat;}
.img02{background:url(images/product2.png) no-repeat;}
/* text */
.text{width:387px;height:203px;overflow:hidden;}
.line01{background:url(images/line1.png) no-repeat;}
.line02{background:url(images/line2.png) no-repeat;}
/* tit */
.tit{width:378px;height:31px;overflow:hidden;}
.title01{background:url(images/title1.png) no-repeat;}
.title02{background:url(images/title2.png) no-repeat;}
[/css]