必优博客

有时候需要显示大量图片时不可能把所有的图片都加载和显示在页面中，最好的做法是显示一部分图片，然后选择性的进行查看，当然这需要借助javascript工具，这里介绍一个jQuery插件jCarousel可实现多图切换展示，可进行横向或纵向排列，自定义播放，同时可设置每次旋转图片个数或显示图片组等，效果图如下：

使用说明
jQuery库文件

jCarousel库文件
http://sorgalla.com/projects/jcarousel/

同时需要自定义显示图片框和图片的CSS样式

使用实例（简单的左右旋转图片实例）
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
2. <script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
3. <link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />

二，HTML部分

1. <ul id="biuuu" class="jcarousel-skin-tango">
2. <li><img src="biuuu_1.jpg" width="75" height="75" alt="" /></li>
3. <li><img src="biuuu_2.jpg" width="75" height="75" alt="" /></li>
4. <li><img src="biuuu_3.jpg" width="75" height="75" alt="" /></li>
5. <li><img src="biuuu_4.jpg" width="75" height="75" alt="" /></li>
6. <li><img src="biuuu_5.jpg" width="75" height="75" alt="" /></li>
7. </ul>

三，Javascript部分

1. <script type="text/javascript">
2. jQuery(document).ready(function() {
3. jQuery('#biuuu').jcarousel();
4. });
5. </script>

包含相应的JS文件和CSS文件，把需要显示的图片放在元素<ul></ul>里，每一张图片对应一个<li></li>元素。直接调用jcarousel()插件实现图片左右旋转效果。

其它使用实例

一，上下旋转图片

1. jQuery('#mycarousel').jcarousel({
2. vertical: true,
3. scroll: 2
4. });

将参数vertical设置为true，其中scroll表示每次切换图片数。

二，一个页面多个旋转效果（上下左右旋转）

1. jQuery('.first-and-second-carousel').jcarousel();
2. jQuery('#third-carousel').jcarousel({
3. vertical: true
4. });

三，自定义图片开始数

1. jQuery('#mycarousel').jcarousel({
2. start: 3
3. });

四，其它如控制图片切换，Ajax动态调用图片等，具体可查看jCarousel源程序。

点我下载jCarousel源代码和演示实例
http://jquerycodes.googlecode.com/files/jcarousel.zip

在线查看jCarousel演示和文档说明
http://sorgalla.com/projects/jcarousel/