相册结构图

<div id="rg-gallery" class="rg-gallery">
    <div class="rg-thumbs">
        <!-- Elastislide Carousel Thumbnail Viewer -->
        <div class="es-carousel-wrapper">
            <div class="es-nav">
                <span class="es-nav-prev">前一张</span>
                <span class="es-nav-next">后一张</span>
            </div>
            <div class="es-carousel">
                <ul>
                    <li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="HTML5手机声音提示" data-description="HTML5手机声音提示" /></a></li>
                    <li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="HTML5手机音频播放器" data-description="HTML5手机音频播放器" /></a></li>
                    <li><a href="#"><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="jQuery+PHP实现开关效果" data-description="jQuery+PHP实现开关效果" /></a></li>
                </ul>
            </div>
        </div>
        <!-- End Elastislide Carousel Thumbnail Viewer -->
    </div><!-- rg-thumbs -->
</div>

引入相关插件

<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>

定义变量js/gallery.js

var $rgGallery = $('#rg-gallery'),
        // carousel container
        $esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
        // the carousel items
        $items = $esCarousel.find('ul > li'),
        // total number of items
        itemsCount = $items.length;