必优博客

制作一个类似QQ空间的相册图片展示功能，使用jQuery插件AD Gallery可以非常简单的实现，效果图如下：

使用说明
需要使用jQuery库文件和AD Gallery库文件[在线演示]
必优推荐级别：★★★★
使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.ad-gallery.js"></script>

二，HTML部分

1. <ul>
2. <li>
3. <a href="images/1.jpg">
4. <img src="t1.jpg" title="" longdesc="" class="image0">
5. </a>
6. </li>
7. <li>
8. <a href="images/10.jpg">
9. <img src="t10.jpg" title="" longdesc="" class="image1">
10. </a>
11. </li>
12. </ul>

这里只列出了部分HTML元素，如上title和longdesc分别表示标题和描述。

三，Javascript部分

1. <script type="text/javascript">
2. $(function() {
3. $('img.image1').data('ad-desc', '');
4. $('img.image1').data('ad-title', '');
5. var galleries = $('.ad-gallery').adGallery({start_at_index: 8});
6. $('#switch-effect').change(
7. function() {
8. galleries[0].settings.effect = $(this).val();
9. return false;
10. }
11. );
12. $('#toggle-slideshow').click(
13. function() {
14. galleries[0].toggleSlideshow();
15. return false;
16. }
17. );
18. });
19. </script>

如上实例就能实现一个类似QQ空间图片展示的功能，可自定义图片的标题和描述，并定义图片展示的动画效果，使用非常简单。

这个插件实用性非常强，稍微修改就可以应用实际的项目中，值得推荐。