为什么我的 Javascript 幻灯片无法正常播放

Question

伙计们，我正在研究 brad traverst 这个 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;
     }

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>

Answer 2

        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
        if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
            document.getElementById("navs").style.transition = "2s";
            document.getElementById("navs").style.height = "20%";
            document.getElementById("sag2").style.transition = "2s";
            document.getElementById("sag2").style.marginLeft = "20%";
            document.getElementById("navs").style.backgroundColor = "white";
            document.getElementById("sol").style.transition = "2s";
            document.getElementById("sol").style.marginLeft = "40%";
            //document.getElementById("sag2").style.left = "20%";
            
        }else{
            document.getElementById("navs").style.height = "15%";
            document.getElementById("sag2").style.transition = "2s";
            document.getElementById("sag2").style.marginLeft = "0%";
            document.getElementById("navs").style.backgroundColor = "transparent";
            document.getElementById("sol").style.transition = "2s";
            document.getElementById("sol").style.marginLeft = "70%";
        }
        }
        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);
        }

 
         .nav{
        width: 100%;
        position: fixed;;
        left: 0;
        height:15%;
        top:0px;
        font-size:15px;
        z-index:1000;
    }
    .a{
        position: relative;
        top:70%;
        font-size: 20px;
        text-decoration: none;  
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color:rgb(90, 76, 76);
    }
    .a:hover{
        text-decoration: none;  
        border-bottom: 2px red solid;
        color:rgb(129, 74, 129);
    }
    #aiki{
        margin:3%;
    }
    #auc{
        border-right: 30px solid transparent;
    }
    #adort{
        border-left: 10px solid transparent;
    }
    #abir{
        margin:3%;
    }
    .sag2{
        position: absolute;
        
    }
    .sol{
        position: absolute;
        top:-5%;
        margin-left:70%;
    }
    .as{
        position: relative;
        top:70%;
        font-size: 20px;
        text-decoration: none;  
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        margin-left:15%;
        color:white;
    }
    .a:hover{
        text-decoration: none;  
        color:rgb(129, 74, 129);
    }
    .img1{
        background-color: rgb(155, 151, 151);
        position: absolute;
        width: 100%;
        height: 25%;
    }
    @media (max-width: 1000px) {
        .a{
            display: none;
        }
     }
     #span{
         color:white;
         margin: 5%;
     }
     .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;
 }

    <nav class="nav" id="navs">
        <nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
        <div class="as">
        <div class="sag" id="sag2">
        <a class="a" id="abir">sad</a>
        <a class="a" id="aiki">sad</a>
    </div>
    <div class="sol" id="sol">
        <a class="a" id="auc">sad</a>
        <a class="a" id="adort">sad</a>
    </div>
    </div>
    </nav>
    <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>

    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
    <div>sss</div><div>sss</div><div>sss</div><div>sss</div>
</body>
</html>

为什么我的 Javascript 幻灯片无法正常播放

Why My Javascript Slideshow Doesnt Work Properly

javascript

slideshow

carousel