开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情第25篇文
Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，我们只需要从官网学习如何使用，改吧改吧就能得到一个好看的轮播图，大大减少了代码量，下面我们就用swiper写一个轮播图，来看看它到底有多好用…..
------本页内容已结束，喜欢请分享------
认识swiper
swiper的特点
- Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
- Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
- Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择
安装Swiper
- npm install Swiper@6
- cnpm install Swiper@6
- yarn add Swiper@6
引用文件
然后想要什么样的效果就从官网粘贴过来，初始化swiper，调试一下就行了，下面我们看具体的例子import Swiper from "swiper";import "swiper/dist/css/swiper.min.css";import Swiper from "swiper"; import "swiper/dist/css/swiper.min.css";import Swiper from "swiper"; import "swiper/dist/css/swiper.min.css";
效果
我们要实现的效果- 轮播
- 点击左右箭头可以进行切换
- 点击分页器也可以进行切换
- 当鼠标移到图片上时，停止轮播
实现思路
HTML
为了减少代码量，这里我们删掉不必要的东西，主体结构如以下代码所示<body><div class="swiper-container" id="container1"><!-- 轮播图 --><div class="swiper-wrapper"><div class="swiper-slide"><img src="https://www.ge69.com/images/banner01.png" ></div><div class="swiper-slide"><img src="https://www.ge69.com/images/banner02.jpg" ></div><div class="swiper-slide"><img src="https://www.ge69.com/images/banner03.png" ></div><div class="swiper-slide"><img src="https://www.ge69.com/images/banner04.png" ></div><div class="swiper-slide"><img src="https://www.ge69.com/images/banner05.png" ></div></div><!-- 分页器 --><div class="swiper-pagination"></div><!-- 导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><!-- IMPORT JS --><script src="https://www.ge69.com/js/swiper-bundle.min.js"></script><script src="https://www.ge69.com/js/index.js"></script></body><body> <div class="swiper-container" id="container1"> <!-- 轮播图 --> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner01.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner02.jpg" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner03.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner04.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner05.png" > </div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> <!-- 导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- IMPORT JS --> <script src="https://www.ge69.com/js/swiper-bundle.min.js"></script> <script src="https://www.ge69.com/js/index.js"></script> </body><body> <div class="swiper-container" id="container1"> <!-- 轮播图 --> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner01.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner02.jpg" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner03.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner04.png" > </div> <div class="swiper-slide"> <img src="https://www.ge69.com/images/banner05.png" > </div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> <!-- 导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- IMPORT JS --> <script src="https://www.ge69.com/js/swiper-bundle.min.js"></script> <script src="https://www.ge69.com/js/index.js"></script> </body>
JS
思路
- 基础配置
- initialSlide: 2,默认0 设定初始化时slide的索引 [跟克隆的索引无关 显示的真实的索引]
- direction: ‘horizontal’, 水平切换选项 horizontal[水平] vertical[垂直]
- speed: 300,每一次切换的动画时间 300ms
- grabCursor: true,鼠标滑上去有手指
- loop: true, 开启循环切换[左右运动实现无缝衔接] 注意索引因为克隆两张的原因，发生改变了
- effect:’fade’,切换效果：slide[位移] fade[淡入] cube[方块] coverflow[实现3D流] flip翻转
- 自动轮播
- delay: 3000,间隔多长时间切换一次
- stopOnLastSlide: false,如果设置为true，当切换到最后一个slide时停止自动切换。loop模式下无效
- 分页器
- type:’bullets’ 分页器样式bullets[圆点默认] bullets[分式] progressbar[进度条]
- clickable: true 点击分页器的指示点分页器会控制Swiper切换
- 前进后退按钮
- 事件监听【回调函数】
- swiper当前创造的这个类的实例
- swiper属性
- activeIndex 包含克隆的索引
- realIndex 真实的索引
- slides 显示的轮播图
- 自己控制鼠标进入/离开容器，同时管控自动轮播的暂停和继续
- 当鼠标点上去要暂停轮播图
- 当鼠标离开的时候要继续轮播
代码实现
let sw1 = new Swiper('#container1', {direction: 'horizontal',speed: 300,loop: true,effect:'fade',autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: false},pagination: {el: '.swiper-pagination',//type:'bullets' //bullets[圆点默认] bullets[分式] progressbar[进度条]clickable: true},navigation: {prevEl: '.swiper-button-prev',nextEl: '.swiper-button-next'},on:{init(swiper){console.log('初始化完成');},transitionEnd(swiper){let {activeIndex,realIndex,slides} =swiper;console.log('切换完成',activeIndex,realIndex,slides);}}});let container=document.querySelector('#container1');container.addEventListener('mouseenter',()=> sw1.autoplay.stop());container.addEventListener('mouseleave',()=> sw1.autoplay.start());let sw1 = new Swiper('#container1', { direction: 'horizontal', speed: 300, loop: true, effect:'fade', autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', //type:'bullets' //bullets[圆点默认] bullets[分式] progressbar[进度条] clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, on:{ init(swiper){ console.log('初始化完成'); }, transitionEnd(swiper){ let {activeIndex,realIndex,slides} =swiper; console.log('切换完成',activeIndex,realIndex,slides); } } }); let container=document.querySelector('#container1'); container.addEventListener('mouseenter',()=> sw1.autoplay.stop()); container.addEventListener('mouseleave',()=> sw1.autoplay.start());let sw1 = new Swiper('#container1', { direction: 'horizontal', speed: 300, loop: true, effect:'fade', autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', //type:'bullets' //bullets[圆点默认] bullets[分式] progressbar[进度条] clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, on:{ init(swiper){ console.log('初始化完成'); }, transitionEnd(swiper){ let {activeIndex,realIndex,slides} =swiper; console.log('切换完成',activeIndex,realIndex,slides); } } }); let container=document.querySelector('#container1'); container.addEventListener('mouseenter',()=> sw1.autoplay.stop()); container.addEventListener('mouseleave',()=> sw1.autoplay.start());
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容