Question

我正在尝试创建一个网站。在FTP我做了文件夹js，css，img，fonts，errors。我想把JS代码放在js / slider.js中，代码是文件slider.js

当我这样做时，滑块无法正常工作。

我认为问题在于

var x = document.getElementsByClassName("mySlides");

我认为这与未正确访问图像类

有关

var x = document.getElementsByClassName("mySlides").src = "~/index.html/;

我试过了，但仍然无效：

<!DOCTYPE html>
    <html>
    <title>COMING Soon!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    <h2 class="w3-center">COMING Soon! Temporary Cover</h2>
       <script type="text/javascript" src="js/slider.js"></script>
     <div id="navbar" class="navbar-collapse collapse navbar_area">          
            <ul class="nav navbar-nav navbar-right custom_nav">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="about.html">About Us</a></li> 
              <li><a href="location.html">Location</a></li>          
              <li><a href="product.html">Our Products</a></li>                 
            </ul>
          </div><!--/.nav-collapse -->

     <div class="w3-content w3-display-container">
      <img class="mySlides" src="img/1.jpg" style="width:100%">
      <img class="mySlides" src="img/2.jpg" style="width:100%">
      <img class="mySlides" src="img/3.jpg" style="width:100%">
      <img class="mySlides" src="img/4.jpg" style="width:100%">

      <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
      <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
    </div>

    </body>
    </html>

此外，它在javascript代码中调用＆＃34; mySlides＆＃34;这是在HTML代码中定义的。因此，我希望调用和访问html类信息以检索此数据。

所需的index.html文件：

var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
      x[slideIndex-1].style.height = "500px"; 
    }

slider.js文件：

<!DOCTYPE html>
<html>
<title>COMING Soon!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h2 class="w3-center">COMING Soon! Temporary Cover</h2>
 <div id="navbar" class="navbar-collapse collapse navbar_area">          
        <ul class="nav navbar-nav navbar-right custom_nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="about.html">About Us</a></li> 
          <li><a href="location.html">Location</a></li>          
          <li><a href="product.html">Our Products</a></li>                 
        </ul>
      </div><!--/.nav-collapse -->

 <div class="w3-content w3-display-container">
  <img class="mySlides" src="img/1.jpg" style="width:100%">
  <img class="mySlides" src="img/2.jpg" style="width:100%">
  <img class="mySlides" src="img/3.jpg" style="width:100%">
  <img class="mySlides" src="img/4.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
  x[slideIndex-1].style.height = "500px"; 
}
</script>


</body>
</html>

index.html文件：

UserManager.IsInRoleAsync

使用JS代码访问滑块HTML代码中的图像

0 个答案: