前端插件--总结分析

访客 阅读:248 2019-11-29 08:54:37 评论:0

一、图标插件库

  (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', 
    });

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
关注我们

扫一扫关注我们,了解最新精彩内容