• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  右侧带缩略图和加载正文

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

作者:我爱模版网
大小:0.481MB
点击次数:
发布时间:2014-02-14 14:09
分享到:

特效介绍

右侧带缩略图的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>

  • 本文标签:
  • jQuery幻灯图片,加载条,缩略图
没有上一篇
jQuery带描述和导航的大图轮播