我一直在制作自己的网站,并努力使此图片幻灯片正常工作。我一直在从youtube视频中复制它,他所做的一切似乎都可以正常工作。这是我第二次尝试使用javascript编写代码,而代码似乎根本不起作用。
[是的,我已经测试了我的JavaScript,没关系。我的计算机为什么不处理这个?
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Website title </title>
</head>
<body>
<script src = "js/app.js"></script>
<div class="carousel-container">
<div class="carousel-slide">
<img src= "img/img3.jpg" id="lastClone" alt="">
<img src= "img/img1.jpg" alt="">
<img src= "img/img2.jpg" alt="">
<img src= "img/img3.jpg" alt="">
<img src= "img/img1.jpg" id="firstClone" alt="">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="NextBtn">Next</button>
</body>
</html>
CSS CODE
*{
padding:0px;
margin: 0px;
box-sizing: border-box;
}
.carousel-container{
width: 60%;
margin: auto;
/*overflow: hidden;*/
}
.carousel-slide{
display: flex;
width: 100%;
height: 500px;
}
JAVASCRIPT CODE
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//counter
let counter =1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter)+ 'px)';
//Button listeners
nextBtn.addEventListener('click', () => {
if (counter <= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter)+ 'px)';
});
prevBtn.addEventListeners('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
});
carouselSlide.addEventListener('tranistionend', ()=>{
if (carouselImages[counter].id === 'lastClone'){
carouselSlide.style.transform = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
}
if (carouselImages[counter].id === 'firstClone'){
carouselSlide.style.transform = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
}
});
JS代码中有一些不匹配/错误,您也可以在各自的浏览器控制台日志中进行检查
prevBtn.addEventListeners(...)
的prevBtn.addEventListener(...)
=
应该是+
,例如代替carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';
应该是carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
if (counter <= carouselImages.length - 1) return;
将其修改为if (counter >= carouselImages.length - 1) return;
查看浏览器控制台并尝试解决每个问题。