jQuery带缩略图、多种切换的焦点轮播效果

使用方法：

引入jQuery库文件

<script src="images3/js/jquery.js?ver=v1.6.4"></script>
<script src="images3/js/html5zoo.js?ver=v0.0.1"></script>
<script src="images3/js/lovelygallery.js?ver=v0.0.1"></script>

HTML结构

<div style="margin:0px auto;width:1100px; margin-top:50px">
    <div id="html5zoo-1" style="display:block;position:relative;margin:0px auto 60px;">
        <ul class="html5zoo-slides" style="display:none;">
            <li><a href="###" target="_blank"><img src="images3/001/001.png" alt="001" data-description="This is the first slide" /></a></li>
            <li><img src="images3/001/002.png" alt="Big Buck Bunny" /></li>
            <li><a href="###" target="_blank"><img src="images3/001/003.png" alt="003" data-description="Third sheets" /></a></li>
            <li><a href="###" target="_blank"><img src="images3/001/004.png" alt="004" data-description="Fourth sheets" /></a></li>
            <li><a href="###" target="_blank"><img src="images3/001/005.png" alt="005" data-description="Fifth sheets" /></a></li>
            <li><a href="###" target="_blank"><img src="images3/001/006.png" alt="006" data-description="Sixth, this is a panoramic view." /></a></li>
          
        </ul>
        <ul class="html5zoo-thumbnails" style="display:none;">
            <li><img src="images3/001/001a.png" /></li>
            <li><img src="images3/001/002a.png" /></li>
            <li><img src="images3/001/003a.png" /></li>
            <li><img src="images3/001/004a.png" /></li>
            <li><img src="images3/001/005a.png" /></li>
            <li><img src="images3/001/006a.png" /></li>
            
        </ul>
    </div>
</div>