代码在 Codepen 中有效，但在我的电脑中无效

Question

伙计们最近我在这里开了一个问题：

在代码片段中，我的代码在 Whosebug 和 codepen 中运行良好，但在我的计算机中却不行。有人可以帮帮我吗？为什么它不起作用？

 <html>
        <head>
            <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        </head>
        <style>
            .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;
         }
        </style>
        <body>
            <script>
                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);
                }
             </script>
            <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>
        </body>
    </html>

Answer 1

经过一番测试，我明白了。通过让 javascript 在 html 之上，querySelector 没有看到你的 next/prev 按钮，所以保存它们的变量实际上被设置为 null。只需将 javascript 移动到底部就可以解决这个问题。

或者将您的 javascript 包裹在 window.onload = function() 中也可以解决。

    <html>
            <head>
                <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

            <style>
                .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;
             }
            </style>
</head>
            <body>
                <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>
                            <script>
                    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);
                    }
                 </script>
            </body>
        </html>

Answer 2

您需要在页面加载后定义脚本

  <html>
            <head>
                <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            </head>
            <style>
                .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;
             }
            </style>
            <body>
               
                <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>
            </body>
            <script>
                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);
                }
             </script>
        </html>

Answer 3

是的，总是建议将所有 Javascript 代码放在 HTML 中的 **</body>** 标记之前，1) 这背后的原因是头部在主体之前加载.加载时在正文中执行的任何动态 javascript 代码都将正确执行。如果您有 javascript 就在标记之前，那么您的页面在加载时对函数进行的任何 javascript 调用都会出错。

所有代码都有效

https://codepen.io/r0binxp/pen/ExKPdmj

代码在 Codepen 中有效，但在我的电脑中无效

Codes Work In Codepen But Don't Work In My Computer

javascript

css

slideshow

carousel

codepen