我正在尝试制作一个垂直图像滑块,该滑块恰好可以滑动滑块的宽度。
我现在已经尝试了许多个小时才能使其正常工作,我认为这应该很简单,但是我根本无法弄清楚自己做错了什么,而我的大脑将在此期间融化还以为我在这一点上太复杂了。
滑块的宽度为548px,高度为137px。
滑块内部的图像的宽度为548px除以2。
JavaScript模块(是的,向左移动和向右移动是不同的,这是因为我一直在测试很多不同的方法。
如果我将正确的功能更改为此:
var horizontalMoveRight = function(wrapper) {
wrapper.scrollLeft += elemScroll;
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
elemMoved++;
}
};
几乎可以运行,但单击几下后仍会稍微移动一点。
var horizontalSlider = (function() {
var slideParent;
var slideLeftButton;
var slideRightButton;
var slideInterval;
var slideTimer;
var elemScroll = 0;
var elemLength = 0;
var elemMove = 0;
var elemMoved = 0;
var lastMove = false;
var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
slideParent = parenElement;
slideLeftButton = document.querySelectorAll(lButn);
slideRightButton = document.querySelectorAll(rButn);
slideTimer = slidTimer;
elemScroll = eleScroll;
Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
};
var horizontalClickLeft = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = (elemLength - elemScroll) / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveLeft(wrapper);
}, slideTimer);
};
var horizontalClickRight = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = (elemLength - elemScroll) / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveRight(wrapper);
}, slideTimer);
};
var horizontalMoveRight = function(wrapper) {
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
if (elemMoved + 1 > elemMove) {
lastMove = Number(((elemMove - elemMoved) * 10));
}
if (lastMove === false) {
wrapper.scrollLeft += elemScroll;
} else {
wrapper.scrollLeft += lastMove;
lastMove = false;
}
elemMoved++;
}
};
var horizontalMoveLeft = function(wrapper) {
wrapper.scrollLeft += -elemScroll;
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
elemMoved++;
}
};
return {
horizontalConstruct: horizontalConstruct,
horizontalClickLeft: horizontalClickLeft,
horizontalClickRight: horizontalClickRight
};
})();
horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);
.slideInner {
position: relative;
width: 548px;
height: 137px;
overflow: hidden;
display: flex;
}
.slideInner a,
.slideInner a img {
width: calc(548px / 2);
}
.slideRightHorizontal,
.slideLeftHorizontal {
position: absolute;
min-width: 45px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
.slideLeftHorizontal {
left: 0;
color: #fff;
}
.slideRightHorizontal {
right: 0;
color: #fff;
}
.overflowh {
overflow: hidden;
}
.slideT1M {
margin: 20px 0px;
border: 1px solid #000;
display: flex;
width: 548px;
position: relative;
}
<div class="slideT1M">
<div class="slideLeftHorizontal">
L
</div>
<div class="slideInner">
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
</div>
<div class="slideRightHorizontal">
R
</div>
</div>
答案 0 :(得分:1)
您的错误在此行上:
elemMove = (elemLength - elemScroll) / elemScroll;
只需将其更改为:
elemMove = elemLength / elemScroll;
var horizontalSlider = (function() {
var slideParent;
var slideLeftButton;
var slideRightButton;
var slideInterval;
var slideTimer;
var elemScroll = 0;
var elemLength = 0;
var elemMove = 0;
var elemMoved = 0;
var lastMove = false;
var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
slideParent = parenElement;
slideLeftButton = document.querySelectorAll(lButn);
slideRightButton = document.querySelectorAll(rButn);
slideTimer = slidTimer;
elemScroll = eleScroll;
Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
};
var horizontalClickLeft = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = (elemLength - elemScroll) / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveLeft(wrapper);
}, slideTimer);
};
var horizontalClickRight = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = elemLength / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveRight(wrapper);
}, slideTimer);
};
var horizontalMoveRight = function(wrapper) {
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
if (elemMoved + 1 > elemMove) {
lastMove = Number(((elemMove - elemMoved) * 10));
}
if (lastMove === false) {
wrapper.scrollLeft += elemScroll;
} else {
wrapper.scrollLeft += lastMove;
lastMove = false;
}
elemMoved++;
}
};
var horizontalMoveLeft = function(wrapper) {
wrapper.scrollLeft += -elemScroll;
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
elemMoved++;
}
};
return {
horizontalConstruct: horizontalConstruct,
horizontalClickLeft: horizontalClickLeft,
horizontalClickRight: horizontalClickRight
};
})();
horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);
.slideInner {
position: relative;
width: 548px;
height: 137px;
overflow: hidden;
display: flex;
}
.slideInner a,
.slideInner a img {
width: calc(548px / 2);
}
.slideRightHorizontal,
.slideLeftHorizontal {
position: absolute;
min-width: 45px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
.slideLeftHorizontal {
left: 0;
color: #fff;
}
.slideRightHorizontal {
right: 0;
color: #fff;
}
.overflowh {
overflow: hidden;
}
.slideT1M {
margin: 20px 0px;
border: 1px solid #000;
display: flex;
width: 548px;
position: relative;
}
<div class="slideT1M">
<div class="slideLeftHorizontal">
L
</div>
<div class="slideInner">
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
</div>
<div class="slideRightHorizontal">
R
</div>
</div>