首页 > 特效插件 > 滚动轮播 >  右侧带缩略图和加载条的jQuery幻灯图片,我爱模正文

右侧带缩略图和加载条的jQuery幻灯图片,我爱模

特效介绍

右侧带缩略图的jquery幻灯

右侧带缩略图和加载条的jQuery幻灯图片,兼容IE6,IE7,IE8,火狐等主流浏览器。

使用方法
1、依次引入 5imoban.css、jQuery脚本库 以及 5imoban.js 文件。

2、将以下代码插入需要显示的区域即可。

<div id="showcase" class="cloud row-content showcase">
    <div class="container">
        <div class="slide" style="display:block; ">
            <div class="content-main-visual">
                <a class="pc" href="http://www.5imoban.net" target="_blank">
                    <img src="images/img01.jpg">
                </a>
                <a class="pc" href="http://www.5imoban.net" target="_blank">
                    <img src="images/img04.jpg">
                </a>
                <a class="pc" href="http://www.5imoban.net" target="_blank">
                    <img src="images/img03.jpg">
                </a>
                <a class="pc" href="http://www.5imoban.net" target="_blank">
                    <img src="images/img02.jpg">
                </a>
            </div>
            <div class="content-main-feature">
                <div class="feature green">
                    <a href="http://www.5imoban.net" class="current">
                        <img src="images/img01s.png">
                        <span>
                            Acer 文件
                        </span>
                        <div class="timerLine dark-green">
                        </div>
                        <!-- 进度条 -->
                    </a>
                </div>
                <div class="feature azure">
                    <a href="http://www.5imoban.net">
                        <img src="images/img04s.png">
                        <span>
                            Acer 远程文件
                        </span>
                        <div class="timerLine dark-azure">
                        </div>
                    </a>
                </div>
                <div class="feature brick">
                    <a href="http://www.5imoban.net">
                        <img src="images/img03s.png">
                        <span>
                            Acer 照片
                        </span>
                        <div class="timerLine dark-brick">
                        </div>
                    </a>
                </div>
                <div class="feature gray">
                    <a href="http://www.5imoban.net">
                        <img src="images/img02s.png">
                        <span>
                            Acer 多媒体
                        </span>
                        <div class="timerLine dark-gray">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>