33-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

3.8.2　解决方案

jQuery在构建时考虑了可扩展性。如果jQuery核心程序库无法满足你的需要，可能会有jQuery插件制作者编写了应对这一需求的插件，它可能只需要一行代码。

要在网页包含一个插件，只需要下载插件的 .js 文件，在页面上包含jQuery程序库，并立刻在页面中包含插件。然后，通常需要在另一个 .js 文件或者页面上的一个脚本块中调用插件，并提供必要的选项。

下面是使用Mike Alsup开发的jQuery cycle插件（http://jquery-cookbook.com/go/plugin-cycle）的例子：

<!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 http-equiv="Content-Type" content="text/html;charset=UTF-8" />
　　 <title>Chapter 3 - Recipe 8 - Adding Functionality with Plugins</title>
　　 <style type="text/css">
　　　　　.pics {
　　　　　　　 height: 232px;
　　　　　　　 width:  232px;
　　　　　　　 padding: 0;
　　　　　　　 margin:  0;
　　　　　}
　　　　　.pics img {
　　　　　　　 padding: 15px;
　　　　　　　 border: 1px solid #ccc;
　　　　　　　 background-color: #eee;
　　　　　　　 width:  200px;
　　　　　　　 height: 200px;
　　　　　　　 top:  0;
　　　　　　　 left:  0
　　　　　}
　　 </style>
　　 <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
　　 <!--Now include your plugin declarations after you've declared jQuery on the page-->
　　　<script type="text/javascript" src="scripts/2.8/jquery.cycle.all.min.js?
v2.60"></script>
　　 <script type="text/javascript">
　　 <!--
　　　　　 (function($){
　　　　　　　 $(document).ready(function(){
　　　　　　　　　　$('.pics').cycle('fade');
　　　　　　　 });
　　　　　})(jQuery);
　　 //-->
　　 </script>
</head>
<body>
　　 <div class="pics">
　　　　　<img src="images/2.8/beach1.jpg" width="200" height="200" alt="Beach 1" />
　　　　　<img src="images/2.8/beach2.jpg" width="200" height="200" alt="Beach 2" />
　　　　　<img src="images/2.8/beach3.jpg" width="200" height="200" alt="Beach 3" />
　　 </div>
</body>
</html>

图3-8展示了输出效果。

图3-8　代码输出（一幅图像谈入另一幅图像中）

只用一行代码，就能完成一个幻灯片效果，一次显示一幅图像，然后自动淡入下一幅图像。Cycle插件的编写方式也是可以扩展的，开发人员可以提供不同的选项，产生不同的过渡效果和布局。

Previous 上一篇本节目录 Next 下一篇

33-解决方案

3.8.2 解决方案

3.8.2　解决方案