写一个简单的前端滑动验证
时间: 2024-01-05 17:52:37 浏览: 27
可以使用第三方库 `swiper.js` 来实现前端滑动验证。
首先,在 `HTML` 文件中添加如下代码:
```html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/200/300" alt="Slide 1">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/200/300" alt="Slide 2">
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
```
其中,`swiper-container` 是容器,`swiper-wrapper` 是轮播图的包裹层,`swiper-slide` 是轮播图的每一项。`swiper-scrollbar` 是滚动条。
然后,在 `CSS` 文件中添加如下代码:
```css
.swiper-container {
width: 100%;
height: 300px;
margin: 0 auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* 使滑块不可见 */
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
```
最后,在 `JS` 文件中添加如下代码:
```javascript
var mySwiper = new Swiper('.swiper-container', {
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
});
// 添加事件监听
mySwiper.on('slideChange', function () {
if (mySwiper.activeIndex === 1) {
// 验证成功
console.log('验证成功');
}
});
```
这样就可以实现一个简单的前端滑动验证。用户需要通过滑动轮播图来完成验证。在验证成功后,可以在 `slideChange` 事件中进行相应的操作。