swiper使用心得

• 引入：

• <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">

• <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>

• 创建：html

        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide_ban1">
                        <div class="inner">
                            <div class="download">
                                <a href="javascript:Get_layer('./webroot/layer.html','721px','482px')"><img src="./webroot/images/bannerdwnews_04.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="./webroot/images/reBnner_03.jpg" alt="">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>

• 创建css样式

/*banner start*/
.banner .swiper-slide_ban1{
    height: 487px;
    background: url(../images/rebnner_02.png) no-repeat;
    background-position: center;
    position: relative;
}
.banner .swiper-slide_ban1 .download{
    position:relative;
    100%;
    height:478px;
}
.banner .swiper-slide_ban1 .download a>img{
       position: absolute;
    top: 279px;
    left: 450px;
}
.banner .swiper-slide_ban1 .download a:hover{
    cursor: pointer;
}

• 创建js

var swiper = new Swiper('.swiper-container', {
            effect : 'fade', //效果
            autoplay: 2000, //自动轮播，不写为手动轮播
            speed:1000, //速度
            autoplayDisableOnInteraction: false,//停止后自动开始
            pagination: '.swiper-pagination', //创建小圆点
            nextButton: '.swiper-button-next',//上一页按钮
            prevButton: '.swiper-button-prev',//下一页按钮
            slidesPerView: 1,//定位z-index
            paginationClickable: true,//允许鼠标拖拽
            spaceBetween: 30, //盒子间的距离，无缝效果就是0
            loop: true //无限循环模式
        });
//鼠标移入移出控制
$('.swiper-container').mouseenter(function () {
    swiper.stopAutoplay();
}).mouseleave(function () {
    swiper.startAutoplay();
});

官网：http://www.swiper.com.cn/