分享一款基于jQuery上下切换的焦点图，这款焦点图带有缩略图悬浮，它的切换效果比较简单，仅仅是作图片的上下切换，但是效果还是比较流畅的。这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮缩略图，点击缩略图也可以播放图片。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

  <div id="banner">
        <div class="banner">
            <ul>
                <li>
                    <img src="images/banner_1.jpg" /></li>
                <li>
                    <img src="images/banner_2.jpg" /></li>
                <li>
                    <img src="images/banner_3.jpg" /></li>
            </ul>
        </div>
        <div class="bannNav">
            <a href="#">
                <h1>
                    水龙头</h1>
                <h2>
                    THE TAP</h2>
                <img src="images/bannav_2.jpg" />
                <h3 class="time1">
                    &nbsp;</h3>
            </a><a href="#">
                <h1>
                    直杆淋浴</h1>
                <h2>
                    SHOWER</h2>
                <img src="images/bannav_2.jpg" />
                <h3 class="time1">
                    &nbsp;</h3>
            </a><a href="#">
                <h1>
                    浴室镜子</h1>
                <h2>
                    MIRROR</h2>
                <img src="images/bannav_4.jpg" />
                <h3 class="time1">
                    &nbsp;</h3>
            </a>
        </div>
    </div>

via：http://www.w2bc.com/Article/20797

在线预览    源码下载