swiper实现常规轮播效果

/*html代码*/
<div class="swiper-container">
   <ul class="swiper-wrapper">
      <li class="swiper-slide">
         slide1   
      </li>
      <li class="swiper-slide">
        slide2
      </li>
   </ul>
   /*分页效果*/
   <div class="swiper-pagination"></div>
</div>
//js代码
var mySwiper = new Swiper('.announcement-swiper', {
   loop: true,//循环轮播
   autoplay: 3000,//三秒轮播一次
   pagination: '.swiper-pagination',//实现分页
   autoplayDisableOnInteraction : false,//分页符点击后可继续轮播
   paginationClickable :true,//分页符可点击
});
//鼠标放上停止轮播,鼠标离开继续轮播
$('.swiper-container').mouseenter(function () {
   mySwiper.stopAutoplay();
}).mouseleave(function () {
   mySwiper.startAutoplay();
})

你可能感兴趣的:(前端)