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

2016-02-20 2644

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

这里写图片描述

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>