为什么我的Javascript幻灯片无法正常工作 [英] Why My Javascript Slideshow Doesnt Work Properly

问题描述

我正在研究布拉德·特拉沃斯特这个JavaScript幻灯片.我的机器无法正常工作，但我无法理解我在哪里犯了错误.错误可能出在我的JavaScript代码中.

Guys I was studying brad traverst this javascript slideshow. And mine is not working but I couldnt understand where I made mistake. Probably the error is in my javascript codes.

我的JavaScript代码:

My javascript codes:

    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的代码时，它不起作用.我在等你的帮助...

Guys can you please review my codes. I just changed function style but when I use Brad's codes it doesnt work. I am waiting your help...

我的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;
     }

推荐答案

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>

这篇关于为什么我的Javascript幻灯片无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！