javaScript + better-scroll 实现移动端轮播图效果
该功能主要实现移动端轮播图的效果, 主要使用 javaScript + better-scroll 技术, 话不多说上代码, 保证简单已懂。
首先我们需要引入 better-scroll 这个插件
github: https://github.com/ustbhuangyi/better-scroll
<script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
第二步我们需要编写页面的 HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./slider.css">
</head>
<body>
<div class='home'>
<div class="slider-wrapper">
<h3 style="margin-top: 30px;">实现方案(javaScript + better-scroll)</h3>
<div class="slider">
<div class="slider-group">
<div>
<a href="">
<img src="./img/swiper_1.jpg">
</a>
</div>
<div>
<a href="">
<img src="./img/swiper_2.jpg">
</a>
</div>
<div>
<a href="">
<img src="./img/swiper_3.jpg">
</a>
</div>
<div>
<a href="">
<img src="./img/swiper_4.jpg">
</a>
</div>
<div>
<a href="">
<img src="./img/swiper_5.jpg">
</a>
</div>
</div>
<!-- 翻页器 -->
<div class="dots"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
<script src="./slider.js"></script>
</body>
</html>
第三步我们需要编写页面的 CSS
slider.css
*{
margin: 0;
padding: 0;
}
.home {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
}
.slider-wrapper{
position: relative;
}
.slider {
min-height: 1px;
}
.slider-group {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.slider-item {
float: left;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.slider-item a {
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
}
.slider-item a img {
width: 100%;
display: block;
}
.dots {
position: absolute;
right: 0;
left: 0;
bottom: 12px;
text-align: center;
font-size: 0;
}
.dot {
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
}
/* 翻页器选中的样式 */
.active {
width: 20px;
border-radius: 5px;
background: #fff;
}
第四步我们需要编写页面的 JS
slider.js
代码中每一步都有注释讲解, 花一点心思应该很快就能明白每个方法的作用
window.onload = function () {
// 是否自动轮博
var autoPlay = false;
// 是否无缝循环轮播
var loop = true
// 轮播的毫秒数
var interval = 1000;
// 定时器
var timer = null;
// 当前滚动的下标
let currentPageIndex = 0;
setTimeout(() => {
// 设置 slider 的宽度
_setSliderWidth();
// 初始化控制器
_initDots();
// 初始化 slider
_initSlider();
// // 判断是否开启了循环轮播
if (autoPlay) {
_play();
}
}, 20);
// 监听尺寸变化
window.addEventListener("resize", () => {
if (!this.slider) {
return;
}
_setSliderWidth(true);
this.slider.refresh();
});
// 给指定元素添加 class
function addClass(el, className) {
if (hasClass(el, className)) { // 判断需要添加的类名是否存在
return
}
// 先将变量转换成数组
let newClass = el.className.split(' ');
// 然后将类名添加到数组中
newClass.push(className);
// 将数组里面的值转换成字符串]
el.className = newClass.join(' ');
}
// 给指定元素删除 class
function removeClass(el, className) {
if (hasClass(el, className)) {
el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " "); // replace方法是替换
};
};
// 查询指定元素是否有相对于的 class
function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
return reg.test(el.className);
}
let slider = document.getElementsByClassName('slider')[0];
// 轮播图的容器
let sliderGroup = document.getElementsByClassName('slider-group')[0];
// 轮播图
let sliderGroupChildren = sliderGroup.children;
// 获取翻页器容器
let dots = document.getElementsByClassName('dots')[0];
// 设置翻页器的数量
var dotsLen = new Array(sliderGroupChildren.length);
// 设置 slider 的宽度
function _setSliderWidth() {
let width = 0;
let sliderWidth = slider.clientWidth;
for (let i = 0; i < sliderGroupChildren.length; i++) {
let child = sliderGroupChildren[i];
addClass(child, "slider-item");
child.style.width = sliderWidth + "px";
width += sliderWidth;
}
if (loop) { // 当设置无缝循环轮播的时候, 默认加两张图片的宽度方便滚动
width += 2 * sliderWidth;
}
// 设置轮播图容器的宽度
sliderGroup.style.width = width + "px";
}
// 初始化 slider
function _initSlider() {
this.slider = new BScroll(slider, {
scrollX: true, // 滚动方向为 X 轴
scrollY: false, // 滚动方向为 Y 轴
momentum: false, // 当快速滑动时是否开启滑动惯性
snap: { // 该属性是给 slider 组件使用的,普通的列表滚动不需要配置
loop: loop, // 是否可以无缝循环轮播
threshold: 0.3, // 用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页
speed: 400 // 轮播图切换的动画时间
},
click: true // 是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用_constructed,若是bs派发的则为true
});
this.slider.on("scrollEnd", () => { // 滚动结束
// 获取当前的页码
let pageIndex = this.slider.getCurrentPage().pageX;
currentPageIndex = pageIndex;
for (let index = 0; index < dotsLen.length; index++) {
if (currentPageIndex == index) {
addClass(dots.children[currentPageIndex], 'active')
} else {
removeClass(dots.children[index], 'active')
}
}
if (autoPlay) { // 条件成立自动轮播
_play();
}
});
// 滚动开始之前
this.slider.on("beforeScrollStart", () => {
if (autoPlay) {
clearTimeout(timer);
}
});
}
// 初始化控制器
function _initDots() {
let cm = '';
for (let index = 0; index < dotsLen.length; index++) {
if (currentPageIndex == index) {
cm = '<span class="dot active"></span>';
} else {
cm = '<span class="dot"></span>';
}
dots.innerHTML += cm;
}
}
// 开始轮播
function _play() {
timer = setTimeout(() => {
// 滚动到下一个页面
this.slider.next();
}, interval);
}
}