js学习总结----swiper的使用和轮播图

Swiper是移动端的一款非常强大的触摸滑动插件，下面代码只展示一些常用的配置，具体可以查看官网api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="swiper.min.css">
    <style>
        /*假设设计稿是640  轮播图区域640*300*/
        html{
            font-size:100px;
        }
        html,body{
            width:100%;
            overflow-x:hidden;
        }
        .swiper-container{
            margin:0 auto;
            height:3rem;
            overflow:hidden;
        }
        .swiper-slide{
            height:3rem;
        }
        .swiper-slide img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <section class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt="">
                <div class='swiper-lazy-preloader'></div>
            </div>
            <div class="swiper-slide">
                <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt="">
                <div class='swiper-lazy-preloader'></div>
            </div>
            <div class="swiper-slide">
                <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt="">
                <div class='swiper-lazy-preloader'></div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </section>
    <script src='swiper.min.js'></script>
    <script>
        //REM  响应式
        ~function(){
            var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN;
            document.documentElement.style.fontSize = ratio*100 + "px";
        }();

        //初始化swiper实现区域的滑动
        //new Swiper([container selector],[settings])
        var swiper1 = new Swiper('.swiper-container',{
            loop:true,//无缝衔接滚动
            effect:'cube',//滑动效果
            autoplay:3000,
            autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay
            pagination:'.swiper-pagination',
            paginationType:'progress',//分页器样式
            lazyLoading:true,//图片延迟加载
            lazyLoadingInPrevNext:true//前一个和后一个延迟加载

        })
    </script>
</body>
</html>
posted @ 2017-08-11 10:52  diasa  阅读(2269)  评论(0)  编辑  收藏  举报