前端插件--总结

一、图标插件库

  (1)http://www.fontawesome.com.cn

1. Swiper:纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端;

     (1)作用:轮播图,文字上下的滚动等

  (2)插件下载:https://files.cnblogs.com/files/damoblog/swiper-4.2.2.zip

  (3)例子:文字上下的滚动

(html代码)

<div class="swiper-container" id="swiper2">
    <div class="swiper-wrapper">
       <div class="swiper-slide">党十九大精神的发扬,值得众学习1</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习2</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习3</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习4</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习5</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习6</div>
       <div class="swiper-slide">党十九大精神的发扬,值得众学习7</div>
    </div>
</div>
//轮播文字
    var swiper2 = new Swiper('#swiper2', {
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      slidesPerView:2,//设置slider容器能够同时显示的slides数量
      slidesPerGroup : 2,
      loop : true,
      loopedSlides: 6,
      speed:2000,//速度
      direction: 'vertical',
    });

 

posted @ 2018-04-13 19:46  达摩院的BLOG  阅读(167)  评论(0编辑  收藏  举报