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
 1         <div class="banner">
 2             <div class="swiper-container">
 3                 <div class="swiper-wrapper">
 4                     <div class="swiper-slide swiper-slide_ban1">
 5                         <div class="inner">
 6                             <div class="download">
 7                                 <a href="javascript:Get_layer('./webroot/layer.html','721px','482px')"><img src="./webroot/images/bannerdwnews_04.png" alt=""></a>
 8                             </div>
 9                         </div>
10                     </div>
11                     <div class="swiper-slide">
12                         <img src="./webroot/images/reBnner_03.jpg" alt="">
13                     </div>
14                 </div>
15                 <!-- Add Pagination -->
16                 <div class="swiper-pagination"></div>
17                 <!-- Add Arrows -->
18                 <div class="swiper-button-next"></div>
19                 <div class="swiper-button-prev"></div>
20             </div>
21         </div>

 

  • 创建css样式
 1 /*banner start*/
 2 .banner .swiper-slide_ban1{
 3     height: 487px;
 4     background: url(../images/rebnner_02.png) no-repeat;
 5     background-position: center;
 6     position: relative;
 7 }
 8 .banner .swiper-slide_ban1 .download{
 9     position:relative;
10     width:100%;
11     height:478px;
12 }
13 .banner .swiper-slide_ban1 .download a>img{
14        position: absolute;
15     top: 279px;
16     left: 450px;
17 }
18 .banner .swiper-slide_ban1 .download a:hover{
19     cursor: pointer;
20 }
  • 创建js
 1 var swiper = new Swiper('.swiper-container', {
 2             effect : 'fade', //效果
 3             autoplay: 2000, //自动轮播，不写为手动轮播
 4             speed:1000, //速度
 5             autoplayDisableOnInteraction: false,//停止后自动开始
 6             pagination: '.swiper-pagination', //创建小圆点
 7             nextButton: '.swiper-button-next',//上一页按钮
 8             prevButton: '.swiper-button-prev',//下一页按钮
 9             slidesPerView: 1,//定位z-index
10             paginationClickable: true,//允许鼠标拖拽
11             spaceBetween: 30, //盒子间的距离，无缝效果就是0
12             loop: true //无限循环模式
13         });
14 //鼠标移入移出控制
15 $('.swiper-container').mouseenter(function () {
16     swiper.stopAutoplay();
17 }).mouseleave(function () {
18     swiper.startAutoplay();
19 });

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

　　

posted @ 2017-06-23 17:14  宋宇  阅读(391)  评论(0)  编辑  收藏  举报