<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Sunflowa Media is a Green,Reliable,Funny Web Design." />
<meta name="keywords" content="CSS,XHTML,Web Design,Website Design,Sunflowa Media,Sunflowa Web Design,Funny Web Design,Web Designer,Game,Online Game,Freelace Website Designer,Beautiful Websites,Networking" />
<title>Custom Animation Banner with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>
</head>
<body>
<div class="content">
<h2 class="title_name">Activities Drop-down menu with <span>CSS & jQuery</span><small>by Sunflowa Media</small></h2>
<div class="examples_body">
<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/luffy.jpg" width="321" height="285" class="ca_shown" alt="モンキー・D・ルフィ"/>
<img src="images/zoro.jpg" width="321" height="285" alt="ゾロ" style="display:none;" />
<img src="images/ace.jpg" width="321" height="285" alt="ポートガス・D・エース" style="display:none;" />
<img src="images/oyaji.jpg" width="321" height="285" alt="白ひげ" style="display:none;" />
<img src="images/prd1ex.jpg" width="321" height="285" alt="電伝虫メジャー" style="display:none;" />
</div>
</div>
<div class="ca_zone ca_zone2"><!--Line-->
<div class="ca_wrap ca_wrap2">
<img src="images/line1.gif" class="ca_shown" alt="" />
<img src="images/line2.gif" alt="" style="display:none;" />
<img src="images/line2.gif" alt="" style="display:none;" />
<img src="images/line4.gif" alt="" style="display:none;" />
<img src="images/line5.gif" alt="" style="display:none;" />
</div>
</div>
<div class="ca_zone ca_zone3"><!--Title-->
<div class="ca_wrap ca_wrap3">
<img src="images/title1.gif" class="ca_shown" alt="" />
<img src="images/title2.gif" alt="" style="display:none;" />
<img src="images/title3.gif" alt="" style="display:none;" />
<img src="images/title4.gif" alt="" style="display:none;" />
<img src="images/title5.gif" alt="" style="display:none;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
//we want 5 steps / slides for the first banner
//let's define what happens for each one:
/*
the variable steps has the following structure:
steps:[step1,step2,...,stepN]
On each step/transition we define the transition for each one of the areas in the banner
For the first banner for example, we have 3 areas, each one with a specific number
of images (the images inside of the "ca_wrap" div). One image is shown as default,
which for our examples is always the first one (1).
So as an example, our first step/transition can be:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
This means that for the first transition, the first and third areas are going to show
their second image, and the second area remains untouched. When we change each image we
apply a specific effect, which is defined in the plugin.
*/
$('#ca_banner1').banner({
steps : [
[
//1 step:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "2"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//2 step:
[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "3"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//3 step:
[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "4"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "4"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//4 step
[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
[{"to" : "5"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "5"}, {"effect": "zoomOut-zoomIn"}]
],
[
//5 step
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
]
],
total_steps : 5,
speed : 4000
});
});
</script>
</body>
</html>
基于jquery的banner广告图片动画切换插件示例.zip （23个子文件） 
132677882045507296 likecs.com_132677882058399654 制作动画效果的广告banner (CSS & jQuery) css 
index.css 2KB images 
line1.gif 6KB
line2.png 12KB title5.gif 7KB
zoro.jpg 34KB prd1ex.jpg 26KB title1.gif 8KB oyaji.jpg 39KB title2.gif 3KB title3.gif 7KB ico.gif 9KB line2.gif 6KB line5.gif 4KB ace.jpg 43KB line4.gif 6KB title4.gif 4KB luffy.jpg 38KB
index.html 5KB js cufon-yui.js 18KB jquery.banner.js 5KB jquery.easing.1.3.js 8KB Bebas_400.font.js 32KB jquery.transform-0.8.0.min.js 14KB资源评论
