自己动手丰衣足食之Swiper插件

下载地址http://download.csdn.net/detail/cometwo/9437881

Swiper插件中文网http://www.swiper.com.cn/

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta http-equiv="refresh" content="100">
        <title>Swiper中文网</title>
        <link href="dist/css/base.css" rel="stylesheet" type="text/css" />
        <link href="dist/css/layout.css" rel="stylesheet" type="text/css" />
        <link href="dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
        <script src="dist/js/swiper.min.js"></script>

    </head>

    <body class="index">

        <div id="banner">
            <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a>
            <div class="swiper-container" id="bannerSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="swiper-slide1">
                        <div class="inner">
                            <div id="mainTheme">
                                <h1>Swiper</h1><span>3</span></div>
                            <p data-swiper-parallax="-1500">开源、免费、强大的移动端触摸滑动插件</p>
                            <div class="subbtn" data-swiper-parallax="-3000">
                                <a class="button" href="/demo/index.html">查看Swiper演示</a> <a class="button" href="/api/index.html">查看API 文档</a> <a class="button" href="http://bbs.swiper.com.cn" target="_blank">交流、分享Swiper</a> <a class="button" href="http://swiper2.swiper.com.cn" target="_blank">回顾Swiper2</a></div>
                            <div class="mainbtn" data-swiper-parallax="-4500">
                                <a href="/usage/index.html">开始使用 Swiper</a></div>
                        </div>
                    </div>
                    <div class="swiper-slide" id="swiper-slide2">
                        <div class="inner">
                            <dl>
                                <dt data-swiper-parallax="-500">为什么选择Swiper?</dt>
                                <dd style="margin-top:50px;" data-swiper-parallax="-1500"> 免费,开源,稳定,应用广泛 </dd>
                                <dd data-swiper-parallax="-3000"> 1可单独使用无需jQuery,亦可结合jQuery </dd>
                                <dd data-swiper-parallax="-4500"> 简单配置即可实现手机、平板网站大部分触摸功能 </dd>
                                <dd data-swiper-parallax="-6000"> 包括焦点图,tab,触摸滑动导航等 </dd>
                                <dd data-swiper-parallax="-7500"> 文档丰富,大量活跃用户解答疑问 </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <div id="bannerpagination" class="pagination"></div>
        </div>
        <script language="javascript"> function display(li) { li.className = 'active'; var subdis = li.getElementsByTagName("ul")[0]; subdis.style.display = "block"; } function ndisplay(li) { li.className = 'noactive'; var subdis = li.getElementsByTagName("ul")[0]; subdis.style.display = "None"; } var preBtn = document.querySelectorAll('.pre-btn'); for (var j = 0; j < preBtn.length; j++) { preBtn[j].onclick = function() { this.style.display = 'none'; this.parentNode.querySelector('.pre-load').style.display = 'none'; myframe = this.parentNode.querySelector('iframe'); framesrc = myframe.attributes["data-src"].value; myframe.setAttribute("src", framesrc); } } </script>

        <div style="display:none;">
            <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6387fcb06c7f33ad6787ab913d4e6d10' type='text/javascript'%3E%3C/script%3E")); </script>
            <div>

                <script> var mySwiper = new Swiper('#bannerSwiper', { loop: true, autoplay: 5000, speed: 1000, pagination: '#bannerpagination', paginationClickable: true, grabCursor: true, nextButton: '.arrow-right', prevButton: '.arrow-left', parallax: true, }); </script>
    </body>

</html>

你可能感兴趣的:(插件,swiper)