jQuery多款产品图片焦点图切换与相册幻灯片功能

使用方法：

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.quick-view.js"></script>

插件初始化、参数配置（尽量放在底部）

$(document).ready(function () {
	$('*[data-plugin*=quickView]').quickView();
});

引入CSS样式文件（比较多，使用的时候自行取舍）

<link href="css/default.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 8]>
<link href="css/default-ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="css/layout.css" rel="stylesheet" media="screen" type="text/css"/>
<!--必要样式-->
<link href="css/quick-view.css" rel="stylesheet" media="screen" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'/>

HTML结构

<div class="quickView project" data-plugin="quickView">
    <div class="padding">
        <div class="gallery">
            <a class="preview" href="#"><img data-quick-view="previewImage" src="images/project1/01.jpg"/></a>
            <ul class="thumbs">
                <li data-image="images/project1/01.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-01.jpg"/></a></li>
                <li data-image="images/project1/02.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-02.jpg"/></a></li>
                <li data-image="images/project1/03.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-03.jpg"/></a></li>
                <li data-image="images/project1/04.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-04.jpg"/></a></li>
                <li data-image="images/project1/05.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-05.jpg"/></a></li>
            </ul>
        </div>
        <div class="info">
            <div class="name"><a href="#">Project name</a></div>
            <div class="count">7 images</div>
        </div>
    </div>
</div>