一款基于jQuery底部带缩略图的焦点图

之前我们已经分享过不少实用的jQuery焦点图插件了，今天我们要介绍的这款jQuery焦点图插件是带有缩略图的，我们只需点击缩略图即可切换至相应的图片，图片切换的时候出现淡入淡出的动画效果。

在线预览   源码下载

实现的代码。

html代码：

 <div class="picbox">

        <div id="featured">

            <div class="image" id="image_pic-01">

                <img src="images/001.jpg">

                <div class="word">

                    <h3>

                        标题一</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-02">

                <img class="full" src="images/002.jpg">

                <div class="word">

                    <h3>

                        标题二</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-03">

                <img class="full" src="images/003.jpg">

                <div class="word">

                    <h3>

                        标题三</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-04">

                <img class="full" src="images/004.jpg">

                <div class="word">

                    <h3>

                        标题四</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-05">

                <img class="full" src="images/005.jpg">

                <div class="word">

                    <h3>

                        标题五</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-06">

                <img class="full" src="images/006.jpg">

                <div class="word">

                    <h3>

                        标题六</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

            <div class="image" id="image_pic-07">

                <img class="full" src="images/007.jpg">

                <div class="word">

                    <h3>

                        标题七</h3>

                    <p>

                        内容介绍</p>

                </div>

            </div>

        </div>

        <div id="thumbs">

            <ul>

                <li class="first btnPrev">

                    <img id="play_prev" src="images/btn_prev.gif"></li>

                <li class="slideshowItem"><a id="thumb_pic-01" href="javascript:" class="current">

                    <img src="images/001_1.jpg"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-02" href="javascript:">

                    <img src="images/002_1.jpg" width="78" height="37"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-03" href="javascript:">

                    <img src="images/003_1.jpg" width="78" height="37"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-04" href="javascript:">

                    <img src="images/004_1.jpg" width="78" height="37"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-05" href="javascript:">

                    <img src="images/005_1.jpg" width="78" height="37"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-06" href="javascript:">

                    <img src="images/006_1.jpg" width="78" height="37"></a></li>

                <li class="slideshowItem"><a id="thumb_pic-07" href="javascript:">

                    <img src="images/007_1.jpg" width="78" height="37"></a></li>

                <li class="last btnNext">

                    <img id="play_next" src="images/btn_next.gif"></li>

            </ul>

            <div class="clear">

            </div>

        </div>

    </div>

via:http://www.w2bc.com/Article/15948