Javascript 如何修复图像幻灯片的此代码？_Javascript_Jquery_Html_Css

Javascript 如何修复图像幻灯片的此代码？

javascript jquery html css

Javascript 如何修复图像幻灯片的此代码？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在制作我的网站，并努力使这张图片幻灯片正常工作。我一直在从youtube视频中复制它，他所做的一切似乎都很管用。这是我第二次尝试用javascript制作一个，但代码似乎根本不起作用是的，我已经测试了我的javascript，一切正常。为什么我的电脑不处理这个 <!DOCTYPE html> <html> <head> <link href="style.css" type="text/css" rel="stylesh

我一直在制作我的网站，并努力使这张图片幻灯片正常工作。我一直在从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)';

    }
});


网站标题
上
下一个
CSS代码
*{
填充：0px；
边际：0px；
框大小：边框框；
}
.转盘式集装箱{
宽度：60%；
保证金：自动；
/*溢出：隐藏*/
}
.旋转滑梯{
显示器：flex；
宽度：100%；
高度：500px；
}
JAVASCRIPT代码
const carouselSlide=document.querySelector（“.carousel slide”）；
const carouselImages=document.queryselectoral（'.carousel slide img'）；
//钮扣
const prevBtn=document.querySelector（“#prevBtn”）；
const nextBtn=document.querySelector（'#nextBtn'）；
//柜台
设计数器=1；
const size=carouselImages[0]。客户端宽度；
carouselSlide.style.transform='translateX（+-size*计数器）+'px'；
//按钮侦听器
nextBtn.addEventListener（'单击'，（）=>{
if（计数器{
if（计数器{
if（旋转木马[计数器].id==='lastClone'）{
carouselSlide.style.transform=“无”；
计数器=旋转木马长度-2；
carouselSlide.style.transform='translateX（+-size*计数器）='px'；
}
if（转盘图像[计数器].id=='firstClone'）{
carouselSlide.style.transform=“无”；
计数器=旋转木马长度-计数器；
carouselSlide.style.transform='translateX（+-size*计数器）='px'；
}
});

JS代码中存在两个不匹配/错误，您也可以在各自的浏览器控制台日志中查看这些错误

在html代码中，下一个按钮id是“NextBtn”，但在js中它被称为“nextBtn”

它应该是app.js代码中的

prevBtn.addEventListener（…）

而不是

prevBtn.addEventListener（…）

例如，在JS中的按钮侦听器代码中有两个

，它们应该是

而不是

carouselSlide.style.transform='translateX（'+（-size*counter）='px）；

carouselSlide.style.transform='translateX（+（-size*计数器）+'px）；

nextbtn侦听器逻辑将始终失败，即计数器最初初始化为1，并且始终小于carouselImages.length值，在本例中该值为5。而不是

if（counter=carouselImages.length-1）返回；

在styles.css中，我看到

溢出：隐藏；

被注释掉了。取消注释它应该可以正常工作

您还需要将HTML代码中的脚本标记移动到正文标记的末尾，即在案例中的下一个按钮标记之后。原因是js代码甚至在初始化HTML元素之前就尝试计算图像宽度（

const size=carouselImages[0].clientWidth；

）

看看你的浏览器控制台，试着解决每一个问题。

你能提供更多信息吗？比如，它是否给出了一个错误，或者什么也没有做等等。它只是并排显示图片，溢出甚至没有隐藏图片。就像一些javascript代码不起作用一样，idk我对这个问题不熟悉谢谢你，我刚刚解决了这是在阅读您的评论之前发生的！脚本标记是问题所在。