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

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

在线预览   源码下载

实现的代码。

html代码：

 <div class="foucebox">
        <div class="bd">
            <div class="showDiv">
                <a href="#">
                    <img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/1.1.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.2.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.3.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.4.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.5.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.6.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data:images/1.7.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
                        class="mask"></span></a></li>
                <li><a href="#">
                    <img src="data: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