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