一款基于jQuery轮播切换焦点图,可播放多张图片

今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片，在这个组件中，你可以任意指定8张图片，然后插件就会帮你自动生成缩略图，并且自动开始切换播放图片。当然，你也可以手动切换图片，只要点击缩略图即可，这款jQuery轮播切换组件配置比较方便，唯一的不足就是只能指定8张图片，灵活性不强。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="foucebox">

        <div class="bd">

            <div class="showDiv">

                <a href="#">

                    <img src="images/1.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2 style="bottom: 60px;">

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/2.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2 style="bottom: 60px;">

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/3.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2 style="bottom: 60px;">

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/4.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2>

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/5.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2>

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/6.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2>

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/7.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2>

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

            <div class="showDiv">

                <a href="#">

                    <img src="images/8.jpg"></a>

                <div class="foucebox_bg">

                </div>

                <div>

                    <h2>

                        <a href="#">标题</a></h2>

                    <p style="bottom: 10px;">

                        简介</p>

                </div>

            </div>

        </div>

        <div class="hd">

            <ul>

                <li class="on"><a href="#">

                    <img src="images/1.1.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.2.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.3.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.4.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.5.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.6.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.7.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

                <li><a href="#">

                    <img src="images/1.8.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span

                        class="mask"></span></a></li>

            </ul>

        </div>

    </div>

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