主页 / 问题 / 874625
Accepted
orel-22
Asked:2020-08-29 03:01:05 +0000 UTC2020-08-29 03:01:05 +0000 UTC

如何强制等待转型结束？

  • 772

有这样一个滑块，并且为它写了一个变换，如果用户点击非常快，那么滑块将没有时间完全滚动通过“框架”，例如可能会停在中间。如何避免这样的影响？PS：越简单越好 

var strip = document.getElementById('filmstrip');
var slider = document.getElementById('slider');
var adv = document.querySelectorAll('.filmstrip>img');
var count = adv.length;
var next= document.getElementById('next');
var back= document.getElementById('back');
//ниже действие вперед
next.onclick = move;
function move() {
    var current=parseInt(getComputedStyle(strip).left);
    var imgWidth = adv[0].clientWidth;
    if(current<=-imgWidth*(count-4)){
        next.style.display="none";
    }
    if (current<=-imgWidth*(count-3)){
    }else{
    strip.style.left=current-imgWidth+('px');
    back.style.display="block";
    }
}
//ниже действие назад
back.onclick = remove;
function remove(){
    var current=parseInt(getComputedStyle(strip).left);
    var imgWidth = adv[0].clientWidth;
    if(current>=-imgWidth*(1)){
        back.style.display="none";
    }
    if (current>=0){
    }else{
    strip.style.left=current+imgWidth+('px');
    next.style.display="block";
    }
}
.slider{
	overflow: hidden;
	width:90%;
	height:auto;
}
.filmstrip{
	position: relative;
	height:100px;
	left:0;
	white-space: nowrap; 
	transition: left 1s;
}
.filmstrip img{
	width:33.34%;
	height:100%;
}
<div class="slider" id="slider">

      <div class="filmstrip" id="filmstrip">
      <img style="background:black">
      <img style="background:red">
      <img style="background:blue">
      <img style="background:pink">
      <img style="background:green">
    </div>
</div>
<div id="next">вперед</div>
<div id="back">назад</div>

javascript

1 个回答

  1. Best Answer

    var strip = document.getElementById('filmstrip');
var slider = document.getElementById('slider');
var adv = document.querySelectorAll('.filmstrip>img');
var count = adv.length;
var next= document.getElementById('next');
var back= document.getElementById('back');
//ниже действие вперед
next.addEventListener("click", move)
function move() {
	next.removeEventListener("click", move)
	back.removeEventListener("click", remove)
    var current=parseInt(getComputedStyle(strip).left);
    var imgWidth = adv[0].clientWidth;
    if(current<=-imgWidth*(count-4)){
        next.style.display="none";
    }
    if (current<=-imgWidth*(count-3)){
    }else{
    strip.style.left=current-imgWidth+('px');
    back.style.display="block";
    }
}
//ниже действие назад
back.addEventListener("click", remove)
function remove(){
	next.removeEventListener("click", move)
	back.removeEventListener("click", remove)
    var current=parseInt(getComputedStyle(strip).left);
    var imgWidth = adv[0].clientWidth;
    if(current>=-imgWidth*(1)){
        back.style.display="none";
    }
    if (current>=0){
    }else{
    strip.style.left=current+imgWidth+('px');
    next.style.display="block";
    }
}

strip.addEventListener("transitionend", function(){
next.addEventListener("click", move)
back.addEventListener("click", remove)
})
    .slider{
	overflow: hidden;
	width:90%;
	height:auto;
}
.filmstrip{
	position: relative;
	height:100px;
	left:0;
	white-space: nowrap; 
	transition: left 1s;
}
.filmstrip img{
	width:33.34%;
	height:100%;
}
    <div class="slider" id="slider">

      <div class="filmstrip" id="filmstrip">
      <img style="background:black">
      <img style="background:red">
      <img style="background:blue">
      <img style="background:pink">
      <img style="background:green">
    </div>
</div>
<div id="next">вперед</div>
<div id="back">назад</div>

    • 1

相关问题