最新消息:

第47款插件:jquery.banner.js用JQuery来制作Flash或者GIF效果的广告过渡

图片幻灯插件 杨红伟 2360浏览 0评论

描述:jquery广告横幅插件制作类似flash或者gif动画广告可以自定义横幅通栏大小。
图片展示:

1

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:
JS下载:http://www.ijquery.cn/js/jquery.banner.js
预览: http://www.ijquery.cn/demo/banner
打包下载:http://www.ijquery.cn/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]

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址