js移動端画像スライダ検証機能を実現します。
以前にuniappフレームのスライダ検証を書きましたが、今日は空きを取って生jsでこの機能を実現します。pc端はしばらくしません。pc端はtouchイベントをmouseイベントに変更すれば実現できますので、ここでもう繰り返し書きません。
（最新のパーフェクトバージョン、js+canvas実現、pc互換、ie 9と移動、js+cavansはピクチャースライダの検証を実現します。）
相変わらず効果を見ます。
前编のuniappのスライダと同じ原理で、ここは纯jsで実现しています。コードは全部自分で书いています。不明なメッセージがあります。
以下は全部のコードです。
html数:
（最新のパーフェクトバージョン、js+canvas実現、pc互換、ie 9と移動、js+cavansはピクチャースライダの検証を実現します。）
相変わらず効果を見ます。
前编のuniappのスライダと同じ原理で、ここは纯jsで実现しています。コードは全部自分で书いています。不明なメッセージがあります。
以下は全部のコードです。
html数:
<!DOCTYPE html>
<html lang="en">
<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>
<style>
* {
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%;
}
</style>
</head>
<body>
<div id="clickBtn"> </div>
<div class="sliderModel">
<div class="cont">
<div class="title"> </div>
<div id="sliderRefresh"> </div>
<div class="imgWrap" id="imgWrap">
<img class="img" src="" />
<div class="sliderOver" id="sliderOver"></div>
<div class="smartImg" id="smartImg">
<img class="simg" src="" />
</div>
</div>
<div class="sliderBox">
<div class="sliderF" id="slider">
<div class="sliderS" id="sliderBtn">
<img class="icon" src="images/slider/sangangy.png" />
</div>
</div>
<div class="bgC">
<div class="bgC_left" id="bgC_left"></div>
</div>
</div>
<div class="showMessage">
</div>
</div>
</div>
<div id="closeBtn"> </div>
</body>
<script src="slider.js"></script>
<script>
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";
}
</script>
</html>
(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;
})()