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等。
框架: 大而全,一整套解决方案
插件: 小而专一,某个功能的解决方案
1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"> 4 <img src="../imges/lbt.jpg" alt=""> 5 </div> 6 <div class="swiper-slide"> 7 <img src="../imges/lbt2.jpg" alt=""> 8 </div> 9 <div class="swiper-slide"> 10 <img src="../imges/lbt3.jpg" alt=""> 11 </div> 12 </div> 13 <!-- Add Pagination --> 14 <div class="swiper-pagination"></div> 15 <!-- Add Arrows --> 16 <div class="swiper-button-next"></div> 17 <div class="swiper-button-prev"></div> 18 </div>
1 .swiper-container { 2 width: 100%; 3 height: 100%; 4 5 } 6 7 .swiper-slide { 8 text-align: center; 9 font-size: 18px; 10 background: #fff; 11 12 /* Center slide text vertically */ 13 display: -webkit-box; 14 display: -ms-flexbox; 15 display: -webkit-flex; 16 display: flex; 17 -webkit-box-pack: center; 18 -ms-flex-pack: center; 19 -webkit-justify-content: center; 20 justify-content: center; 21 -webkit-box-align: center; 22 -ms-flex-align: center; 23 -webkit-align-items: center; 24 align-items: center; 25 } 26 27 .swiper-pagination-bullet { 28 background-color: black !important; 29 }
1 var swiper = new Swiper('.swiper-container', { 2 spaceBetween: 30, 3 centeredSlides: true, 4 autoplay: { 5 delay: 5000, 6 disableOnInteraction: false, 7 }, 8 pagination: { 9 el: '.swiper-pagination', 10 clickable: true, 11 }, 12 navigation: { 13 nextEl: '.swiper-button-next', 14 prevEl: '.swiper-button-prev', 15 }, 16 });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步