基于HTML5和CSS的全屏焦点图特效

引入css js代码文件

<link href="css/slider.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='js/slider.js'></script>

html结构文件

<header>
    <div class="header-content home">
        <div class="parallax-bg" id="slider-wrap">
            <div class="slider parallax-bg" id="slider">
                <div class="slider-sections sandbox">
                    <section class="first">
                        <img alt="Kendo UI" src="images/home-banner-1.png" />
                        <div class="text">
                            <h2>
                                SmartSite Ver 2.2
                                <br />
                                智能网站管理系统
                            </h2>
                            <p class="copy">
                                采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。
                            </p>
                            <p class="button">
                                <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);">
                                    Download
                                </a>
                                <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"
                                href="http://www.jqueryba.com/">
                                    Learn More
                                </a>
                            </p>
                        </div>
                    </section>
                    <section>
                        <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />
                        <div class="text" style="padding-top: 10px;">
                            <h2>
                                企业网站管理系统
                            </h2>
                            <p class="copy">
                                单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。
                            </p>
                            <p class="button">
                                <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);">
                                    Download
                                </a>
                                <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"
                                href="http://www.jqueryba.com/">
                                    Learn More
                                </a>
                            </p>
                        </div>
                    </section>
                    <section>
                        <img src="images/home_banner_web-q2.png" alt="Kendo UI" />
                        <div class="text">
                            <h2>
                                智能移动网站管理系统
                            </h2>
                            <p class="copy">
                                基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。
                            </p>
                            <p class="button">
                                <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);">
                                    Download
                                </a>
                                <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"
                                href="http://www.jqueryba.com/">
                                    Learn More
                                </a>
                            </p>
                        </div>
                    </section>
                </div>
            </div>
            <a class="slider-prev" href="javascript: void(0)">
                ?
            </a>
            <a class="slider-next" href="javascript: void(0)">
                ?
            </a>
        </div>
    </div>
</header>