如何为我的图片幻灯片修复此代码?

问题描述 投票:0回答:1

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

    }
});
javascript jquery html css
1个回答
0
投票

JS代码中有一些不匹配/错误,您也可以在各自的浏览器控制台日志中进行检查

  1. 在html代码中,“下一步”按钮ID为“ N extBtn”,但在您的js中,它称为“ nextBtn”
  2. 而不是应该在您的app.js代码中为prevBtn.addEventListeners(...)prevBtn.addEventListener(...)
  3. 例如,在JS中的按钮侦听器代码中,有几个=应该是+,例如代替carouselSlide.style.transform = 'translateX(' + (-size * counter) = 'px)';应该是carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  4. nextbtn侦听器逻辑将始终失败,即计数器最初初始化为1,并且始终小于carouselImages.length值(在这种情况下为5)。代替if (counter <= carouselImages.length - 1) return;将其修改为if (counter >= carouselImages.length - 1) return;

查看浏览器控制台并尝试解决每个问题。

© www.soinside.com 2019 - 2024. All rights reserved.