我尝试使用左下方的箭头实现一个简单的图像滑块。
当滑块到达末尾（左或右）时，我希望箭头在那一侧消失。现在我无法到达左侧列表的末尾。此外，我不知道如何使列表居中，以便每个被查看的项目都在屏幕上居中。
这是一个说明这些问题的gif： https://i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4
这是标记：
<!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">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider</title>
</head>
<body>
<div class="headline">
<h1>
Experience The
<br>
<span>Diamond Revolution</span>
</h1>
<h3>
Spin actual diamonds in 360° HD and zoom in up to 40x. One of the world's biggest collections of loose diamonds, at your
fingertips.
</h3>
</div>
<div class="slider">
<ul class="slider-wrap">
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/round-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ROUND
</h3>
<h4 class="sub-title">
Maximizes light return from the top of the stone
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/cushion-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
CUSHION
</h3>
<h4 class="sub-title">
Antique cut with 58 facets and rounded corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/marquise-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
MARQUISE
</h3>
<h4 class="sub-title">
Long, narrow surface makes it appear larger than life
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/heart-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
HEART
</h3>
<h4 class="sub-title">
Features a distinctive cleft at the top and superior brilliance
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/pear-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PEAR
</h3>
<h4 class="sub-title">
Tradition meets brilliance in unique ‘water drop’ shape
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/radiant-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
RADIANT
</h3>
<h4 class="sub-title">
Brilliance combined with non-traditional cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/oval-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
OVAL
</h3>
<h4 class="sub-title">
Elongated shape accentuates the length of the finger
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/asscher-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ASSCHER
</h3>
<h4 class="sub-title">
Vintage-style square shape with cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/emerald-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
EMERALD
</h3>
<h4 class="sub-title">
Long lines create an elegant and sophisticated look
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/princess-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PRINCESS
</h3>
<h4 class="sub-title">
Maximum brilliance in an exquisite square form
</h4>
</div>
</li>
</ul>
</div>
<div class="controls">
<div class="title">
<h3>
PRINCESS
</h3>
<h4>
Maximum brilliance in an exquisite square form
</h4>
</div>
<a href="#" id="prev" class="fa fa-long-arrow-right">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
<a href="#" id="next" class="fa fa-long-arrow-left">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
Index.js：
var imageSlider = function () {
var slider = document.querySelector(".slider");
var items = document.querySelectorAll(".slider-item");
var itemWidth = items[0].offsetWidth;
var sliderList = document.querySelector(".slider-wrap");
var count = items.length / 2;
// Control Buttons
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var isNextHidden = false;
var isPrevHidden = false;
// Diamond Display
var mainTitle = document.querySelector(".controls .title h3");
var subTitle = document.querySelector(".controls .title h4");
window.addEventListener("resize", function () {
itemWidth = items[0].offsetWidth;
});
centerItem(count);
sliderList.style.left = "-" + count * itemWidth + "px";
var nextSlide = function () {
uncenterItem(count);
if (count >= 2) {
count--;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count === 1) {
next.style.display = "none";
isNextHidden = true;
}
centerItem(count);
}
var prevSlide = function () {
uncenterItem(count);
if (count < items.length) {
if (isNextHidden) {
next.style.display = "block";
}
count++;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count == items.length - 1) {
prev.style.display = "none";
isPrevHidden = true;
}
centerItem(count);
}
function uncenterItem(count) {
var centeredItem = items[count];
centeredItem.classList.remove("centered");
}
function centerItem(count) {
console.log(count);
var centeredItem = items[count];
centeredItem.classList.add("centered");
var title = centeredItem.getElementsByClassName("title");
var itemTitle = title[0].children[0].innerText.trim();
var itemSubtitle = title[0].children[1].innerText.trim();
// Assigning values to the fields
mainTitle.innerHTML = itemTitle;
subTitle.innerHTML = itemSubtitle;
}
next.addEventListener("click", nextSlide);
prev.addEventListener("click", prevSlide);
};
window.onload = function () {
imageSlider();
};
SASS文件：
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
.headline {
text-align: center;
h1 {
font-size: 50px;
font-weight: normal;
margin-bottom: 0;
span {
font-weight: 700;
}
}
h3 {
font-size: 18px;
}
}
.slider {
position: relative;
width: 100%;
height: 300px;
padding-bottom: 50px;
overflow: hidden;
.slider-wrap {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
height: 100%;
min-width: 200%;
padding: 0;
margin: 80px 0;
transition: all 750ms ease;
left: 0;
.slider-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin: 0 20px;
height: 100%;
width: 250px;
float: left;
transition: all 750ms ease;
.title {
display: none;
}
img {
margin: 0 auto;
width: 250px;
}
}
.centered {
transform: scale(1.5);
}
}
}
.controls {
.title {
display: block;
position: absolute;
bottom: 30px;
left: 50%;
text-align: center;
margin: 20px;
color: black;
transform: translateX(-55%);
h3 {
font-size: 20px;
font-weight: 700;
}
h4 {
font-size: 15px;
font-weight: normal;
}
}
#prev,
#next {
position: absolute;
bottom: 0;
width: 100px;
line-height: 50px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 50%;
font-size: 70px;
text-align: center;
color: black;
text-decoration: none;
transform: translateY(-50%);
transition: all 150ms ease;
}
#prev {
right: 10px;
margin-right: 20vw;
}
#next {
left: 10px;
margin-left: 20vw;
img {
transform: rotate(180deg);
}
}
}
答案 0 :(得分：0)
第42行 else if (count == items.length - 1)中的条件应替换为else if (count == items.length)。
还需要通过使用undefined条件检查对象是否存在来处理if错误。请参阅pen并参阅第50和58行。
希望这有帮助。