即使将其链接到我的 HTML 页面，Javascript 似乎也无法与我的网站交互

问题描述 投票：0回答：1

对于 HTML、CSS 和 JavaScript 编码，我还是个新手。

我需要有关我正在构建的投资组合网站的帮助。问题出在我的 JavaScript 上，因为即使将其链接到我的 HTML 页面后，它似乎也无法与我的网站交互。

我需要帮助的地方：

  1. 我需要有关使滑块自动移动而无需单击下一步按钮的指导。此外，当我单击“下一步”时，滑块中嵌入的视频不会播放。

  2. 当我单击加号时，手风琴功能未打开。

我不确定这些问题的根本原因。我的网页结构可能会导致这些问题。滑块和手风琴位于不同的 HTML 页面上，但它们共享相同的 JavaScript 文件。

这是我的滑块的 html 和 css：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="Education.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
    <link rel="shortcut icon" href="msk12.jpg" type="image/jpg"> 
  
</head>
<body>

    <nav class="header">
        <a href='NEWMSK.html' class="logo"><img src='' alt='logo'></a>
       
        <ul class="main-nav">
            <li><a href="#">Contact Me</a></li>
            <li><a href="Project.html">Projects</a></li>
            <li><a href="Experience.html">Experience</a></li>
            <li><a href="Education.html">Education</a></li>
            <li><a href="NEWMSK.html">Home</a></li>
        </ul>
    </nav>

    <h1 class="word"> MY GRADUATION <span> CEREMONY </span></h1>
   <div class="slideshow-section">
    <div class="image-dot">
        <div class="slideshow-container">
            <div class="mySlides fade">
                <div class="numbertext">1/2</div>
                <img src="grade1.jpg" style="width:100%">
                <div class="text"></div>
            </div>
            <div class="mySlides fade">
                <div class="numbertext">2/2</div>
                <video src="grade video.mp4" style="width:"></video>
                <div class="text"></div>
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <div class="dot-container">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        
    </div>
</div>
<div class="text-box">
    <p></p>
</div>
</div>
</div>

<div class="footer-bottom">
    <p> &copy;2024 MADE WITH ❤️ BY <span> </span></p>
 </div>
</div>

<script src="MSK.js"></script>

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

这是滑块的 CSS 

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: Hoefler Text;
   background-color: rgb(233, 245, 248);
}

header {
   margin: 3% 10%;
   padding: 37px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo img {
   max-width: 650px;
}

.main-nav {
   font-size: 20px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #00BFFF;
}

.main-nav li {
   float: right;
}

.main-nav li a {
   display: block;
   color: #ffffff;
   text-align: center;
   padding: 10px 12px;
   text-decoration: none;
}

.main-nav li:hover {
   background: #D3D3D3;
}

 .word{
  margin-top:20px;
  text-align: center;
 
 }
 span {
     color: #00BFFF;
  }

 
  @media screen and (max-width: 768px) {
    header {
       margin: 3% 5%;
    }
 
    .logo img {
       max-width: 250px;
    }
 
    .word,
    .images {
       width: 100%;
       max-width: unset;
    }
 
    .images img {
       transform: none;
       left: 0;
    }
 }
 
.mySlides {
    display: none;
    height: 30rem;

    
}
img {
    vertical-align: middle;
    border: none;
    border-radius: 30px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    

}
.slideshow-section{
    display:flex ;
    justify-content:center ;
    padding-block: 3rem;
    width: 90%;
    gap: 2rem;
    margin: auto;
    
      
}
.image-dot{
    display: flex;
    flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}

.slideshow-container {
  position: relative;
  width: 100%;
 
  
}

.text-box {
    width: 100%;

}
.text-box p{
    background-color: #00BFFF;
    border-radius: 13px;
    padding:2rem ;
    border:2px solid #000000;
}
.text-box input[type="text"] {
    width: 100%; 
    padding: 10px;
    border: 3px solid #000000;
    border-radius: 5px;
    font-size: 16px;

}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #ffffff;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  
}
.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) 
  .prev, .next,.text {font-size: 11px}
.dot{
 height: 10px;
  width: 10px;
}
@media only screen and (max-width: 500px) {
  .prev, .next,.text {font-size: 14px}
}

video{
  width: 100%;
  height: 100%;
  max-width: 660px; 
  vertical-align: middle;
    border: none;
    border-radius: 30px;
    object-fit: cover;
}


@media (max-width:768px){
  .slideshow-section{
flex-direction:column;
  }
}

这里是手风琴的 html 和 css 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="Experience.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
    <link rel="shortcut icon" href="msk12.jpg" type="image/jpg"> 
   
</head>
<body>

<nav class="header">
    <a href='NEWMSK.html' class="logo"><img src='Suffian-Name.png' alt='logo'></a>
   
    <ul class="main-nav">
        <li><a href="#">Contact Me</a></li>
        <li><a href="Project.html">Projects</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="NEWMSK.html">Home</a></li>
    </ul>
</nav>

<div class="work-wrapper">
        <img class="workex" src="work-experince.jpg">
    <div class="text-container">
        <h1 class="text-word"> WORK<span> EXPERIENCE</span></h1>
        <div class="word-box">
            <p></p>
        </div>
    </div>
</div>


<h1 class="experience-heading-sub-text" style="color: #00BFFF;">Work, Managerial Experience,Internship and Volunteering</h1>   
<div class="accordion">
    <div class="contentBx">
    <div class="label"> CURRENT JOB</div>
    <div class="content">
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.</p>
    </div>
    </div>
</div>
<div class="accordion">
    <div class="contentBx">
    <div class="label"> MANAGERIAL EXPERIENCE/TEAM LEADER </div>
    <div class="content">
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.</p>
    </div>
    </div>
</div>
<div class="accordion">
    <div class="contentBx">
    <div class="label"> RETAIL</div>
    <div class="content">
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.</p>
    </div>
    </div>
</div>
<div class="accordion">
    <div class="contentBx">
    <div class="label"> INTERNSHIP</div>
    <div class="content">
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.</p>
    </div>
    </div>
</div>
<div class="accordion">
    <div class="contentBx">
    <div class="label"> VOLUNTEERING</div>
    <div class="content">
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque vero autem ratione doloribus sapiente magni id saepe officiis doloremque, recusandae aliquam quibusdam, accusantium tempora reprehenderit sunt magnam accusamus? Et, obcaecati.</p>
    </div>
    </div>
</div>

<div class="footer-bottom">
    <p> &copy;2024 MADE WITH ❤️ BY <span></span></p>
 </div>
</div>

<script src="MSK.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

这是手风琴的 CSS：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
     margin: 0;
     padding: 0;
     font-family: Hoefler Text;
     background-color: rgb(233, 245, 248);
  }
  
  header {
     margin: 3% 10%;
     padding: 37px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
  }
  
  .logo img {
     max-width: 650px;
  }
  
  .main-nav {
     font-size: 20px;
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #00BFFF;
  }
  
  .main-nav li {
     float: right;
  }
  
  .main-nav li a {
     display: block;
     color: #ffffff;
     text-align: center;
     padding: 10px 12px;
     text-decoration: none;
  }
  
  .main-nav li:hover {
     background: #D3D3D3;
  }
  
 .work-wrapper {
    margin: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 2rem;
  
}

.workex {
    max-width: 50%;
    padding: 20px;
}

.text-container {
    padding:20px;
    text-align: center;
    
}

.text-word {
    padding-top: 10px;
    text-align: center;
    margin-bottom: 10px;

}

span {
    color: #00BFFF;
}

.word-box {
    width: 100%;

}
.word-box p{
    background-color: #00BFFF;
    border-radius: 13px;
    padding:2rem ;
    border:2px solid #000000;}


    @media screen and (max-width: 768px) {
        header {
           margin: 3% 5%;
        }
    
        .logo img {
           max-width: 250px;
        }

    
        .work-wrapper {
            flex-direction: column;
        }
    
        .workex {
            max-width: 100%;
        }
    
        .text-container {
            padding: 20px;
            text-align: center;
        }
    }
    
    .experience-heading-sub-text {
        padding-top: 100px;
        text-align: center;
        margin: 0;
        color: #00BFFF;
    }
    .accordion{
        max-width: 800px;
        margin: 0 auto;
    }
    .accordion .contentBx{
        position: relative;
        margin: 10px 20px;
    }
    .accordion .contentBx .label{
        padding: 10px;
        background: #00BFFF;
        color: #ffffff;
        cursor: pointer;
        text-align: center;
    }
    .accordion .contentBx .label::before{
        content: '+';
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        font-size: 1.5em;
    }
    .accordion .contentBx .active .label::before{
        content: '-';

    }
    .accordion .contentBx .content{
        position: relative;
        background:#fff;
        height: 0;
        overflow: hidden;
        transition: 0.5s;
        overflow-y: auto;
    }
    .contentBx.active .content{
        height: 200px;
      }



      .footer-bottom {
        background: rgb(233, 245, 248);
        padding: 10px;
        position: relative;
        text-align: center;
        align-items: center;
        bottom: 0;
        width: 100%;
      
      }
      
      .footer-bottom p {
        font-size: 15px;
        word-spacing: 2px;
        text-transform: capitalize;
      }

这是滑块和手风琴共享的 javascript 文件：

// The Slider//
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides(slideIndex = n);
}
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
// Accordion//
 const accordion = document.getElementsByClassName('contentBx');
    for (let i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }

我尝试了一切，但似乎没有效果。

javascript java html css
1个回答
0
投票

用于为手风琴提供交互性的“+”符号在页面中通过“伪元素”（::before）表示。这些元素是非交互式元素，它们不能直接响应单击或悬停。 通过 html 页面中的按钮制作加号并将事件侦听器链接到它。然后在 javascript 中，将手风琴内容切换到活动状态。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.