之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。

(最新完美版本，js+canvas实现，兼容pc，ie9和移动，js+cavans实现图片滑块验证)

老样子，还是先看效果

原理和上篇uniapp的滑块一样，不一样的是这里是纯js实现，代码是全部是自己写的，有不清楚的可以留言。

下面是全部代码：

html:

Document

* {

margin: 0;

padding: 0;

}

.sliderModel {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

display: none;

}

.title {

width: 100%;

height: 60px;

font-size: 18px;

color: #333;

display: flex;

align-items: center;

justify-content: center;

}

.cont {

position: relative;

background: #fff;

width: 300px;

border-radius: 8px;

overflow: hidden;

padding-bottom: 20px;

}

.imgWrap {

position: relative;

width: 280px;

height: 150px;

border-radius: 8px;

margin: 0 auto;

overflow: hidden;

}

#sliderRefresh {

position: absolute;

top: 20px;

right: 30px;

cursor: pointer;

color: green;

}

.img {

display: block;

width: 100%;

height: 100%;

}

.sliderOver {

position: absolute;

left: 0;

top: 0;

width: 50px;

height: 50px;

background: #ddd;

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);

}

.smartImg {

position: absolute;

z-index: 2;

left: 0;

top: 0;

width: 50px;

height: 50px;

overflow: hidden;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

}

.simg {

position: absolute;

display: block;

width: 280px;

height: 150px;

}

.sliderBox {

width: 280px;

margin: 10px auto 0;

height: 36px;

position: relative;

}

.sliderF {

width: 100%;

height: 100%;

z-index: 3;

}

.sliderS {

cursor: pointer;

position: absolute;

left: 0;

top: 0;

z-index: 2;

height: 36px;

width: 36px;

background: #007cff;

border-radius: 36px;

display: flex;

justify-content: center;

align-items: center;

}

.icon {

width: 20px;

height: 20px;

}

.bgC {

position: absolute;

z-index: 1;

left: 0;

top: 50%;

transform: translateY(-50%);

width: 100%;

height: 30px;

border-radius: 30px;

line-height: 30px;

font-size: 14px;

color: #999999;

box-shadow: inset 0 0 4px #ccc;

text-align: center;

overflow: hidden;

}

.bgC_left {

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

width: 0;

height: 28px;

border-top-left-radius: 28px;

border-bottom-left-radius: 28px;

line-height: 28px;

font-size: 14px;

background-color: #eee;

box-shadow: inset 0 0 4px #ccc;

text-align: center;

}

.showMessage {

text-align: center;

font-size: 14px;

height: 30px;

line-height: 30px;

}

#closeBtn {

position: fixed;

z-index: 10;

bottom: 10px;

left: 50%;

}

var object = {

bImg: 'imgWrap',

sImg: 'smartImg',

sImgOver: 'sliderOver',

sliderF: 'slider',

sliderBtn: 'sliderBtn',

sliderBg: 'bgC_left',

refreshBtn: 'sliderRefresh',

range: 5,

imgArr: ['images/sliderz/1.jpg', 'images/sliderz/2.jpg', 'images/sliderz/3.jpg', 'images/sliderz/4.jpg',

'images/sliderz/5.jpg'

],

refreshCallback: function (e) {

var showMessage = document.getElementsByClassName('showMessage')[0];

showMessage.innerHTML = "";

showMessage.style.color = "#333";

},

callback: function (e) {

var showMessage = document.getElementsByClassName('showMessage')[0];

if (!e) {

showMessage.innerHTML = "验证失败，请重新验证";

showMessage.style.color = "red";

} else {

showMessage.innerHTML = "验证成功！";

showMessage.style.color = "green";

}

},

}

var mSlider = null;

document.getElementById('clickBtn').onclick = function () {

document.getElementsByClassName('sliderModel')[0].style.display = "flex";

mSlider = new window.mobileSlider(object)

}

document.getElementById('closeBtn').onclick = function () {

document.getElementsByClassName('sliderModel')[0].style.display = "none";

}

js部分(slider.js)

(function () {

function mobileSlider(params) {

var object = {

bImg: params.bImg, //大图片的盒子

sImg: params.sImg, //图片上的小图片

sImgOver: params.sImgOver, //图片上的占位区域

sliderF: params.sliderF, //滑块的父元素

sliderBtn: params.sliderBtn, //滑块

sliderBg: params.sliderBg, //滑块滑动过程中的背景块

refreshBtn: params.refreshBtn, //刷新按钮

range: params.range, //验证通过的运行范围值

imgArr: params.imgArr, //图片数组

refreshCallback: params.refreshCallback, //刷新回调

callback: params.callback //验证回调函数，true为成功，false为失败

};

var sliderF = document.getElementById(object.sliderF);

var sliderBtn = document.getElementById(object.sliderBtn);

var sliderBg = document.getElementById(object.sliderBg);

var sImg = document.getElementById(object.sImg);

var bImg = document.getElementById(object.bImg);

var sImgOver = document.getElementById(object.sImgOver);

var refreshBtn = document.getElementById(object.refreshBtn);

var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth;

var sImgBeginLeft = 0;

function refresh() {

sliderBtn.style.left = sliderBg.style.width = 0;

sImgBeginLeft = 0;

var ram = Math.random();

var imgIndex = Math.floor(object.imgArr.length * ram);

var imgSrc = object.imgArr[imgIndex];

bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc;

sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";

sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px";

sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";

sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";

sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";

object.refreshCallback(true)

}

refresh();

sliderBtn.ontouchstart = function (e) {

var ev = e || window.event

var downX = ev.touches[0].pageX;

var sImgLeft = parseInt(sImg.style.left);

this.ontouchmove = function (e) {

var ev = e || window.event;

var leftX = ev.touches[0].pageX - downX;

leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left)

sliderBtn.style.left = leftX + 'px';

sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px";

sImg.style.left = leftX + sImgLeft + "px";

}

this.ontouchend = function (e) {

this.ontouchmove = null; //移除移动事件

var sImgLeft = parseInt(sImg.style.left);

var sImgOverLeft = parseInt(sImgOver.style.left);

if (Math.abs(sImgOverLeft - sImgLeft) < object.range) {

object.callback && object.callback(true)

} else {

object.callback && object.callback(false)

var timer = null,

step = 10;

var sliderBtnLeft = parseInt(sliderBtn.style.left)

timer = setInterval(function () {

sliderBtnLeft -= step;

step += 5;

if (sliderBtnLeft <= 0) {

clearInterval(timer);

sliderBtnLeft = 0;

sliderBtn.style.left = sliderBg.style.width = 0;

sImg.style.left = parseInt(sImgBeginLeft) + "px"

}

sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px";

sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px"

}, 20)

}

}

};

refreshBtn.ontouchstart = function () {

refresh()

}

}

window.mobileSlider = mobileSlider;

})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。