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

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