javascript - 为什么我的 Javascript 幻灯片无法正常工作

Question

伙计们，我正在研究布拉德特拉弗斯这个 javascript 幻灯片。我的不工作，但我不明白我在哪里犯了错误。可能错误在我的javascript代码中。

我的 JavaScript 代码：

    const slides = document.querySelectorAll(".slide");
    const next = document.querySelector("#next");
    const prev = document.querySelector("#prev");
    const auto = true;
    const invervalTime = 5000;
    let slideInterval;

    function nextslide(){
        //Get current class
        const current = document.querySelector('current');
        //Remove current class
        current.classList.remove('current')
        //Check for next slide
        if(current.nextElementSibling){
            //Add current to nextElementSibling
            current.nextElementSibling.classList.add('current');
        }else{
            //Add current to start
            slides[0].classList.add('current');
        }
        setTimeout(() => current.classList.remove('current'));
    }
    
    function prevslide(){
        //Get current class
        const current = document.querySelector('.current');
        //Remove current class
        current.classList.remove('current')
        //Check for previous slide
        if(current.previousElementSibling){
            //Add current to previousElementSibling
            current.previousElementSibling.classList.add('current');
        }else{
            //Add current to last
            slides[slides.length - 1].classList.add('current')
        }
        setTimeout(() => current.classList.remove('current'));
    }

    //button events
    next.addEventListener('click', e =>{
        nextslide();
        if(auto){
        clearInterval(slideInterval)
        slideInterval = setInterval(nextslide, invervalTime);
    }
    });
    prev.addEventListener('click', e =>{
        prevslide();
        if(auto){
        clearInterval(slideInterval)
        slideInterval = setInterval(nextslide, invervalTime);
    }
    });

    //autoplay
    if(auto){
        slideInterval = setInterval(nextslide, invervalTime);
    }

伙计们，请您检查我的代码。我只是更改了函数样式，但是当我使用 Brad 的代码时它不起作用。我在等你的帮助...

我的html代码：

<div class="slider">
    <div id="firstcontent"class="slide current">
        <div class="content">
            <h1>Slide One</h1>
            <p>Slide One's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Two</h1>
            <p>Slide Two's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Third</h1>
            <p>Slide Third's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Four</h1>
            <p>Slide Four's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Five</h1>
            <p>Slide Five's paraghrap</p>
        </div>
    </div>
</div>
<div class="button">
    <button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
    <button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>

我的CSS代码：

   .slider{
         position:relative;
         overflow:hidden;
         height:100%;
         width:100%;
     }
     .slide{
         position:absolute;
         top:0;
         left:0;
         width: 100%;
         height:100%;
         opacity:0;
         transition: opacity 0.4s ease-in-out;
     }
     .slide.current{
         opacity:1;
     }
     .slide.current .content{
         opacity: 1;
         left:0;
        transition: all 0.7s ease-in-out 0.3s;
     }
     .content{
         position: absolute;
         bottom: 70px;
         left:-600px;
         opacity:0;
         width:600px;
         background-color: rgb(255, 255, 255, 0.8);
         color: #333333;
         padding:35px;
     }
     .content h1{
        margin-bottom: 10px;
     }
     #next{
         position:absolute;
         top:200px;
         right:15px;
     }
     #prev{
         position:absolute;
         top:200px;
         left:15px;
     }
     .buttons{
        border: 2px solid #ffffff;
        background-color: transparent;
        color:#ffffff;
        cursor:pointer;
        padding: 13px 15px;
        border-radius: 50%;
        outline: none;
        transition: 1.5s;
     }
     .buttons:hover{
         background-color: white;
         color:black;
         transition: 1.5s;
     }
     @media (max-width: 800px) {
     .slide .content{
        bottom:-300px;
        left:0;
        width:100%;
     }
     .slide.current .content{
         transform: translateY(-300px);
     }
    }
     .slide:first-child{
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(2){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(3){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(4){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(5){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }

标签： javascriptcarouselslideshow

Answer 1

document.querySelector('current')将 document.querySelector('.current')在

function nextslide(){
  const current = document.querySelector('current');
        
    }

和

.slider{
         position:relative;
         overflow:hidden;
         height:100%;
         width:100%;
     }

将会

.slider{
             position:relative;
             overflow:hidden;
              height: 100vh;
              width: 100vw;
         }

const slides = document.querySelectorAll(".slide");
    const next = document.querySelector("#next");
    const prev = document.querySelector("#prev");
    const auto = true;
    const invervalTime = 5000;
    let slideInterval;

    function nextslide(){
        //Get current class
        const current = document.querySelector('.current');
        //Remove current class
        current.classList.remove('current')
        //Check for next slide
        if(current.nextElementSibling){
            //Add current to nextElementSibling
            current.nextElementSibling.classList.add('current');
        }else{
            //Add current to start
            slides[0].classList.add('current');
        }
        setTimeout(() => current.classList.remove('current'));
    }
    
    function prevslide(){
        //Get current class
        const current = document.querySelector('.current');
        //Remove current class
        current.classList.remove('current')
        //Check for previous slide
        if(current.previousElementSibling){
            //Add current to previousElementSibling
            current.previousElementSibling.classList.add('current');
        }else{
            //Add current to last
            slides[slides.length - 1].classList.add('current')
        }
        setTimeout(() => current.classList.remove('current'));
    }

    //button events
    next.addEventListener('click', e =>{
        nextslide();
        if(auto){
        clearInterval(slideInterval)
        slideInterval = setInterval(nextslide, invervalTime);
    }
    });
    prev.addEventListener('click', e =>{
        prevslide();
        if(auto){
        clearInterval(slideInterval)
        slideInterval = setInterval(nextslide, invervalTime);
    }
    });

    //autoplay
    if(auto){
        slideInterval = setInterval(nextslide, invervalTime);
    }

 
 .slider{
         position:relative;
         overflow:hidden;
         height: 100vh;
         width: 100vw;
     }
     .slide{
         position:absolute;
         top:0;
         left:0;
         width: 100%;
         height:100%;
         opacity:0;
         transition: opacity 0.4s ease-in-out;
     }
     .slide.current{
         opacity:1;
     }
     .slide.current .content{
         opacity: 1;
         left:0;
        transition: all 0.7s ease-in-out 0.3s;
     }
     .content{
         position: absolute;
         bottom: 70px;
         left:-600px;
         opacity:0;
         width:600px;
         background-color: rgb(255, 255, 255, 0.8);
         color: #333333;
         padding:35px;
     }
     .content h1{
        margin-bottom: 10px;
     }
     #next{
         position:absolute;
         top:200px;
         right:15px;
     }
     #prev{
         position:absolute;
         top:200px;
         left:15px;
     }
     .buttons{
        border: 2px solid #ffffff;
        background-color: transparent;
        color:#ffffff;
        cursor:pointer;
        padding: 13px 15px;
        border-radius: 50%;
        outline: none;
        transition: 1.5s;
     }
     .buttons:hover{
         background-color: white;
         color:black;
         transition: 1.5s;
     }
     @media (max-width: 800px) {
     .slide .content{
        bottom:-300px;
        left:0;
        width:100%;
     }
     .slide.current .content{
         transform: translateY(-300px);
     }
    }
     .slide:first-child{
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(2){
        background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(3){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(4){
        background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }
     .slide:nth-child(5){
        background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
     }

<div class="slider">
    <div id="firstcontent"class="slide current">
        <div class="content">
            <h1>Slide One</h1>
            <p>Slide One's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Two</h1>
            <p>Slide Two's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Third</h1>
            <p>Slide Third's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Four</h1>
            <p>Slide Four's paraghrap</p>
        </div>
    </div>
    <div class="slide">
        <div class="content">
            <h1>Slide Five</h1>
            <p>Slide Five's paraghrap</p>
        </div>
    </div>
</div>
<div class="button">
    <button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
    <button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>