JS 前端框架笔记

Swiper轮播图插件使用

    官网:https://www.swiper.com.cn/

    先引用插件的css、js文件

    然后找到需要使用的轮播图文件中去把HTML css和JS代码直接拿过来就好

    SuperSlide插件 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果

    先引用JS文件

    然后找到需要使用的轮播图文件中去把HTML css和JS代码直接拿过来就好

 

移动端视频插件    zy.media.js

移动端常用框架

    前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端

    前端常用的移动端插件有 swiper、superslide、iscroll等。

    框架： 大而全，一整套解决方案

    插件： 小而专一，某个功能的解决方案

 <div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
                 <img src="../imges/lbt.jpg" alt="">
             </div>
             <div class="swiper-slide">
                 <img src="../imges/lbt2.jpg" alt="">
             </div>
             <div class="swiper-slide">
                 <img src="../imges/lbt3.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>

 .swiper-container {
             width: 100%;
             height: 100%;

         }

         .swiper-slide {
             text-align: center;
             font-size: 18px;
             background: #fff;

             /* Center slide text vertically */
             display: -webkit-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;
             -webkit-box-pack: center;
             -ms-flex-pack: center;
             -webkit-justify-content: center;
             justify-content: center;
             -webkit-box-align: center;
             -ms-flex-align: center;
             -webkit-align-items: center;
             align-items: center;
         }

         .swiper-pagination-bullet {
             background-color: black !important;
         }

 var swiper = new Swiper('.swiper-container', {
         spaceBetween: 30,
         centeredSlides: true,
         autoplay: {
             delay: 5000,
             disableOnInteraction: false,
         },
         pagination: {
             el: '.swiper-pagination',
             clickable: true,
         },
         navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
         },
     });