我有一个全局变量，用于存储一些div的位置，其初始值为0。 当我单击一个按钮时，我将0加上220px来移动内容，但是我有两个按钮，所以当我单击下一个按钮而不是将内容移动220px时，它会将其移动440px（这意味着原来的值是当我单击下一个按钮时，不会清除它。
还有其他解决方法吗？
如果解决方案是纯javascript，我将不胜感激
window.onload = function(){
//CAROUSEL
var leftSlideBtn = document.querySelectorAll('.nav-left');
var rightSlideBtn = document.querySelectorAll('.nav-right');
var flexItems = document.querySelectorAll('.flex-item');
var flex = document.querySelectorAll('.flex');
var itemPos = 0;
var duration = 800;
////////////////////////////////////SLIDE FORWARD////////////////////////////////
for (var i = 0; i < rightSlideBtn.length; i++) {
rightSlideBtn[i].addEventListener('click', F_slideHandlers);
rightSlideBtn[i].addEventListener('mousedown', F_TransitionError);
}
function F_slideHandlers() {
var currentClickedBtn = Array.from(rightSlideBtn).indexOf(this);
var flexID = currentClickedBtn;
var totalFlexItemWidth = flex[flexID].children[1].offsetLeft - flex[flexID].children[0].offsetLeft;
var F_overflowedWidth = flex[flexID].scrollWidth - flex[flexID].offsetWidth;
// console.log(F_overflowedWidth);
F_slide(flexID, totalFlexItemWidth, F_overflowedWidth);
F_btnOff();
F_btnOn();
}
function F_slide(id, flexItemFullwidth, F_overflow) {
itemPos -= flexItemFullwidth;
for (var i = 0; i < flex[id].children.length; i++) {
flex[id].children[i].style.left = itemPos + 'px';
flex[id].children[i].style.transitionDuration = duration + 'ms';
var overflow = F_overflow + itemPos;
}
}
function F_btnOff() {
for (let i = 0; i < rightSlideBtn.length; i++) {
rightSlideBtn[i].removeEventListener('click', F_slideHandlers);
}
}
function F_btnOn() {
setTimeout(function() {
for (let i = 0; i < rightSlideBtn.length; i++) {
rightSlideBtn[i].addEventListener('click', F_slideHandlers);
}
}, duration);
}
function F_TransitionError() {
F_ErrorFix();
F_fixed();
}
function F_ErrorFix() {
for (var i = 0; i < flexItems.length; i++) {
flexItems[i].style.left = itemPos + 'px';
}
}
function F_fixed() {
for (var i = 0; i < rightSlideBtn.length; i++) {
rightSlideBtn[i].removeEventListener('mousedown', F_TransitionError);
}
}
} #wrapper{
background: #f4f4f4;
height: 250px;
width: 100%;
margin-top: 100px;
}
img{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.content-slider-nav-btn{
position: absolute;
height: 45px;
width: 45px;
border-radius: 50%;
margin-top: 100px;
background: #333;
color: #fff;
z-index: 1;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4), 1px 0 1px rgba(0, 0, 0, 0.4);
}
.content-slider-nav-btn:hover {
background: #000;
cursor: pointer;
transform: scale(1.0);
transition: 500ms ease;
}
.content-slider-nav-btn:active {
background: transparent;
cursor: pointer;
transform: scale(1.1);
transition: 500ms ease;
/* box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.2), 1px 2px 10px 2px rgba(0, 0, 0, 0.2); */
}
.content-slider-nav-btn i {
margin-top: 13px;
margin-left: 15px;
font-size: 17px;
}
.nav-left {
left: 10px;
display: none;
}
.nav-right {
right: 10px;
}
.flex {
max-height: 300px;
width: 95%;
background: #fafafa;
margin: 0 auto;
overflow: hidden;
display: flex;
box-shadow: inset 0 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0 0px 1px 0px rgba(0, 0, 0, 0.2);
}
.flex-item {
position: relative;
min-height: 200px;
min-width: 210px;
max-height: 230px;
max-width: 220px;
background: #ddd;
margin-right: 10px;
box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
/* transition-duration: 800ms; */
transition-timing-function: ease-out;
}
.flex-item:last-child {
margin-right: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SLIDE FIX</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
</body>
</html>
答案 0 :(得分：0)
大多数注释都放在此小提琴中，不太适合SO处理多级代码的方式，但也请放在此处。代码中包含的注释会传达大多数更改及其原因，因此在此处重复这些注释将是不必要的。
https://jsfiddle.net/Luis_Perez64/qzr9yjud/
window.onload = function(){
//CAROUSEL
let leftSlideBtn = document.querySelectorAll('.nav-left');
let rightSlideBtn = document.querySelectorAll('.nav-right');
let flexElements = document.querySelectorAll('.flex');
let itemPos = [];
let duration = 800;
////////////////////////////////////SLIDE FORWARD////////////////////////////////
for (let i = 0; i < rightSlideBtn.length; i++) {
/*
Instead of dealing with global vars which are more than not warned against,
It comes out better to just pass in your variables.
Reason for the functions is to keep the context of this scope technically global,
and pass in/through the variables cleanly.
*/
rightSlideBtn[i].addEventListener('click', function() {
F_slideHandlers(flexElements[i], i)
});
// NOTE: Commented out the remove event listener from the code below, never resuscribes although it happens only on first pull.
rightSlideBtn[i].addEventListener('mousedown', function() {
F_TransitionError(flexElements[i], i)
});
/*
Using an array to handle your positioning, because there could be multiple elements and each should have their own thought
on what their position is. The manner in which you were seeking to solve this would
require counters, and arithmetic to keep within just one variable.
// NOTE: !!!! This is more than likely the main change that you'd have to make to your initial implementation, but everything else comes in as heavy, personal, recommendations.
*/
itemPos.push(0)
}
function F_slideHandlers(flex, idx) {
let totalFlexItemWidth = flex.children[1].offsetLeft - flex.children[0].offsetLeft;
let F_overflowedWidth = flex.scrollWidth - flex.offsetWidth;
F_slide(flex, totalFlexItemWidth, F_overflowedWidth, idx);
// NOTE: Why are these two functions needed? Adding and removing event listeners
F_btnOff(flex, idx);
F_btnOn(flex, idx);
}
function F_slide(flexItem, flexItemFullwidth, F_overflow, idx) {
itemPos[idx] -= flexItemFullwidth;
for (let i = 0; i < flexItem.children.length; i++) {
flexItem.children[i].style.left = itemPos[idx] + 'px';
flexItem.children[i].style.transitionDuration = duration + 'ms';
}
}
function F_btnOff(flex, idx) {
/* rightSlideBtn[idx] && rightSlideBtn[idx].removeEventListener('click', () => F_slideHandlers(flex, idx)); */
}
function F_btnOn(flex, idx) {
/*
setTimeout(function() {
rightSlideBtn[idx] && rightSlideBtn[idx].addEventListener('click', () => F_slideHandlers(flex, idx));
} , duration);
*/
}
function F_TransitionError(flex, idx) {
F_ErrorFix(flex, idx);
F_fixed(flex, idx);
}
function F_ErrorFix(flexItems, idx) {
for (let i = 0; i < flexItems.length; i++) {
flexItems[i].style.left = itemPos[idx] + 'px';
}
}
function F_fixed(flex, idx) {
// NOTE: I feel the only real reason for this was to fix the overrun caused by multiple event listeners grabbing and mutating that itemPosition variable initially.
for (let i = 0; i < rightSlideBtn.length; i++) {
/* rightSlideBtn[i].removeEventListener('mousedown', () => F_TransitionError(flex, idx)) */
;
}
}
} #wrapper{
background: #f4f4f4;
height: 250px;
width: 100%;
margin-top: 100px;
}
img{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.content-slider-nav-btn{
position: absolute;
height: 45px;
width: 45px;
border-radius: 50%;
margin-top: 100px;
background: #333;
color: #fff;
z-index: 1;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4), 1px 0 1px rgba(0, 0, 0, 0.4);
}
.content-slider-nav-btn:hover {
background: #000;
cursor: pointer;
transform: scale(1.0);
transition: 500ms ease;
}
.content-slider-nav-btn:active {
background: transparent;
cursor: pointer;
transform: scale(1.1);
transition: 500ms ease;
/* box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.2), 1px 2px 10px 2px rgba(0, 0, 0, 0.2); */
}
.content-slider-nav-btn i {
margin-top: 13px;
margin-left: 15px;
font-size: 17px;
}
.nav-left {
left: 10px;
display: none;
}
.nav-right {
right: 10px;
}
.flex {
max-height: 300px;
width: 95%;
background: #fafafa;
margin: 0 auto;
overflow: hidden;
display: flex;
box-shadow: inset 0 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0 0px 1px 0px rgba(0, 0, 0, 0.2);
}
.flex-item {
position: relative;
min-height: 200px;
min-width: 210px;
max-height: 230px;
max-width: 220px;
background: #ddd;
margin-right: 10px;
box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
/* transition-duration: 800ms; */
transition-timing-function: ease-out;
}
.flex-item:last-child {
margin-right: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SLIDE FIX</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
</body>
</html>