• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  jQuery带描述和导航的正文

jQuery带描述和导航的大图轮播

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

特效介绍

jquery带描述和导航的大图轮播

jQuery带描述和导航的大图轮播,兼容IE6,IE7,IE8,火狐,360等主流浏览器。当然,IE6的PNG透明问题,得先解决。需要解决IE6的png透明问题,教程请访问:完美解决IE6的png透明问题

使用方法

1、依次引入 fashionfoucs.css、jQuery脚本库 以及 jquery.plugin.min.js 文件。

2、将以下代码复制进页面中即可


<div id="banner">
    <ul id="banner_img">
        <li class="item1">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        互联网品牌传播解决方案
                    </h2>
                    <p>
                        成都顶级品牌网站建设公司-锐狐网络!
                        <br />
                        基于互联网的品牌行销策略的策划与执行。
                        <br />
                        品牌形象挖掘、梳理、包装、表现与传播。
                        <br />
                        辅助企业实现品牌战略目标的互联网解决方案。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120905092323647.png" width="506" height="404" alt="互联网品牌传播解决方案"
                    />
                </div>
            </div>
        </li>
        <li class="item2">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        Web应用(B/S)定制开发
                    </h2>
                    <p>
                        自主研发、完善的开发框架。
                        <br />
                        详细的需求调研及解决方案。
                        <br />
                        实施项目经验丰富的项目团队。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015430148.png" width="506" height="404" alt="Web应用(B/S)定制开发"
                    />
                </div>
            </div>
        </li>
        <li class="item3">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        互联网时代的整合营销
                    </h2>
                    <p>
                        基于互联网的品牌营销策略的定制与执行。
                        <br />
                        品牌形象挖掘、梳理、包装、表现与传播。
                        <br />
                        坐拥着最为丰富的行业经验与优势资源。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015446637.png" width="506" height="404" alt="互联网时代的整合营销"
                    />
                </div>
            </div>
        </li>
        <li class="item4">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        您的网站全职管家
                    </h2>
                    <p>
                        成熟的监控与报警机制。
                        <br />
                        丰富的整合营销的能力和经验。
                        <br />
                        专业数据分析、开发和维护部门。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015615324.png" width="506" height="404" alt="您的网站全职管家"
                    />
                </div>
            </div>
        </li>
        <li class="item5">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        不可忽略的移动终端
                    </h2>
                    <p>
                        IOS系统、Android系统应用开发。
                        <br />
                        App Store、Google Play 发布。
                        <br />
                        APP推广服务。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015631560.png" width="506" height="404" alt="不可忽略的移动终端"
                    />
                </div>
            </div>
        </li>
        <li class="item6">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        全新的学术会议体验
                    </h2>
                    <p>
                        工作更高效,主办方更轻松。
                        <br />
                        线上报名,让主办方不再为报名的事而费尽脑筋。
                        <br />
                        线上投稿、审稿,为主办方提高收寄、审稿效率。
                        <br />
                        酒店预订,会议行程更加轻松。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015651273.png" width="506" height="404" alt="全新的学术会议体验"
                    />
                </div>
            </div>
        </li>
        <li class="item7">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        医院网站管理系统(HMS)
                    </h2>
                    <p>
                        与大型医院密切合作。
                        <br />
                        诊疗挂号很轻松,检验结果实时查询,在线医患服务。
                        <br />
                        便捷的数据处理能力,稳定的软件基础架构。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015711808.png" width="506" height="404" alt="医院网站管理系统(HMS)"
                    />
                </div>
            </div>
        </li>
        <li class="item8">
            <div class="wrapper">
                <div class="ad_txt">
                    <h2>
                        智慧点亮网络(RUIFOX-LAB)
                    </h2>
                    <p>
                        互联网改变世界,我们改变互联网。
                        <br />
                        精彩前沿技术演练场。
                        <br />
                        锐狐新产品尝鲜体验。
                    </p>
                    <a href="http://www.lanrentuku.com/" target="_blank">
                        了解详细&gt;
                    </a>
                </div>
                <div class="ad_img">
                    <img src="images/20120830015726137.png" width="506" height="404" alt="智慧点亮网络(RUIFOX-LAB)"
                    />
                </div>
            </div>
        </li>
    </ul>
    <div id="banner_ctr">
        <div id="drag_ctr">
        </div>
        <ul>
            <li class="first-item">
                网站建设
            </li>
            <li>
                品牌网站建设
            </li>
            <li>
                应用系统开发
            </li>
            <li>
                网络整合营销
            </li>
            <li>
                网络运维托管
            </li>
            <li>
                手机APP开发
            </li>
            <li>
                学术会议系统
            </li>
            <li>
                医院网站系统
            </li>
            <li>
                实验室
            </li>
            <li class="last-item">
                网站设计
            </li>
        </ul>
        <div id="drag_arrow">
        </div>
    </div>
</div>
<script type="text/javascript" src="js/fashionfoucs.js">
</script>


  • 本文标签:
  • jQuery轮播,图片轮播
右侧带缩略图和加载条的jQuery幻灯图片,我爱模
右侧带缩略图的JS幻灯