/*نمط الشعار*/
.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:100%;
height:100%;
position:relative;
overflow:hidden;
}
.ca_zone{
position:absolute;
width:100%;
}
.ca_wrap{
position:relative;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.ca_wrap img.ca_shown{
display:inline !important;
}
/*حجم البنر*/
.ca_banner2{
width:120px;
height:600px;
}
/*الخلفية*/
.ca_bg2{
background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
top:10px;
left:0px;
}
.ca_banner2 .ca_wrap1, /*نفس الحجم*/
.ca_banner2 .ca_wrap2{
width:120px;
height:220px;
}
.ca_banner2 .ca_zone2{
top:250px;
left:0px;
}
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
<!-- كود الجافا سكريبت -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script src="jquery.transform-0.8.0.min.js"></script>
<script src="jquery.banner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//4 حركات للبنر
$('#ca_banner2').banner({
steps : [
[
//1 حركة :
[{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}],
[{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}]
],
[
//2 حركة:
[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
],
[
//3 حركة:
[{"to" : "2"}, {"effect": "slideOutLeft-slideInLeft"}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//4 حركة:
[{"to" : "1"}, {"effect":"zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {"effect": "zoomOutRotated-zoomInRotated"}],
]
],
total_steps : 4,
speed : 2000
});
});
</script>