开启掘金成长之旅！这是我参与「掘金日新计划 · 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
引用文件
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>
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());
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容