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

如何解决为什么我的Javascript幻灯片无法正常工作

我正在研究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,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,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>

,

        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',sans-serif;
        margin-left:15%;
        color:white;
    }
    .a:hover{
        text-decoration: none;  
        color:rgb(129,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,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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-