js Swiper移动设备触控滑块的框架

2016-08-29 本文已影响103人 sirai

Swiper使用方法

<head>
 ...
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper-3.3.1.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<style>
这里是当前页面定义的一些样式
</style>
</head>
<body>
HTML内容
<!-- Swiper JS -->
<script src="./js/swiper-3.3.1.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
  ..... 初始化时隐藏元素并在需要的时刻开始动画。
</body>

style 样式

<style>
    html, body {
        position: relative;
        height: 100%;

    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        color: #24d69a;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
 
    .img-slide {//设置背景图片
        background: url("img/logo.png");
    }
    .white-slide {//设置背景颜色
        background: #ffffff;
    }
    </style>

html内容
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

 <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容1</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容2</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容3</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容4</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容5</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容6</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容7</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容8</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容9</p></div>
            <div class="swiper-slide white-slide"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容10</p></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

初始化时隐藏元素并在需要的时刻开始动画

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true,
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });

js Swiper移动设备触控滑块的框架

猜你喜欢

热点阅读