jquery插件-flexslider

引入js和样式文件后，增加样式：

.flexslider {    margin: 0 auto 3em;    width: 50%;    min-width: 800px;}.flex-caption {    width: 96%;    padding: 2%;    left: 0;    bottom: 0;    background: rgba(0, 0, 0, .5);    color: #fff;    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);    font-size: 14px;    line-height: 18px;}li.css a {    border-radius: 0;}

图片资源：

<div class="flexslider">    <ul class="slides">        <g:each in="${photos}" var="p">            <li>                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${createLink(action: 'renderPhoto', id: p.id)}"/>                <p class="flex-caption">拍摄时间：${p.dateCreated.format('yyyy-MM-dd HH:mm:ss')}，坐标：${p.longitude},${p.latitude}</p>            </li>        </g:each>    </ul></div>

最后的js代码：

<script type="text/javascript">    $(function () {        $('.flexslider').flexslider({            animation: "slide"        });    });</script>