QQ相册制作
使用方法：
引入JQ库与插件js
<link rel="stylesheet" href="css/basic.css" type="text/css" /><link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" /><script type="text/javascript" src="js/jquery-1.4.2.js"></script><script type="text/javascript" src="js/jquery.galleriffic.js"></script><script type="text/javascript" src="js/jquery.opacityrollover.js"></script><script type="text/javascript" src="js/function.js"></script>
添加容器html
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" isELIgnored="false" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>QQ图片</title><link rel="stylesheet" href="css/basic.css" type="text/css" /><link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" /><script type="text/javascript" src="js/jquery-1.4.2.js"></script><script type="text/javascript" src="js/jquery.galleriffic.js"></script><script type="text/javascript" src="js/jquery.opacityrollover.js"></script><script type="text/javascript" src="js/function.js"></script></head><body><div id="page"><div id="container"><h1>安全检查相册</h1><h2>0905</h2><!-- Start Advanced Gallery Html Containers --><div id="gallery" var="img"><li><a name="leaf" href="uploadImages/${img}" title="图片"><img width="100" height="80" src="uploadImages/${img}" alt="QQ相本制作" /></a></li></c:forEach></ul></div><!-- End Advanced Gallery Html Containers --><div style="clear: both;"></div></div></div></body></html>初始化插件：
jQuery(document).ready(function($) {// We only want these styles applied when javascript is enabled$('div.navigation').css({'width' : '300px', 'float' : 'left'});$('div.content').css('display', 'block');// Initially set opacity on thumbs and add// additional styling for hover effect on thumbsvar onMouseOutOpacity = 0.67;$('#thumbs ul.thumbs li').opacityrollover({mouseOutOpacity: onMouseOutOpacity,mouseOverOpacity: 1.0,fadeSpeed: 'fast',exemptionSelector: '.selected'});// Initialize Advanced Galleriffic Galleryvar gallery = $('#thumbs').galleriffic({delay: 2500,// 动画播放间隔时间 numThumbs: 10,// 所要显示的图片数目preloadAhead: 5,// 设置为-1时预加载所有图片 enableTopPager: true,enableBottomPager: true,maxPagesToShow: 7,imageContainerSel: '#slideshow',// 接下来的三个属性是作为容器的css名 controlsContainerSel: '#controls',captionContainerSel: '#caption',loadingContainerSel: '#loading',renderSSControls: true,renderNavControls: true,playLinkText: '幻灯片播放',pauseLinkText: '暂停幻灯片播放',prevLinkText: '‹ 上一张图片',nextLinkText: '下一张图片 ›',nextPageLinkText: '下一页 ›',prevPageLinkText: '‹ 上一页',enableHistory: false,autoStart: false,syncTransitions: true,defaultTransitionDuration: 900,onSlideChange: function(prevIndex, nextIndex) {// 'this' refers to the gallery, which is an extension of $('#thumbs')this.find('ul.thumbs').children().eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end().eq(nextIndex).fadeTo('fast', 1.0);},onPageTransitionOut: function(callback) {this.fadeTo('fast', 0.0, callback);},onPageTransitionIn: function() {this.fadeTo('fast', 1.0);}});}