Question

我将在JavaScript中创建简单的滑块（没有jquery）。我的.xhtml页面包含无序列表：

<ul>
        <li class="slider"><img src="images/1.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/2.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/3.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/4.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/5.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/6.jpg" alt="asd" width="600px" height="400px" /></li>
        <li class="slider"><img src="images/7.jpg" alt="asd" width="600px" height="400px" /></li>
</ul>

这是我的剧本：

var s = document.getElementsByClassName('slider');
function hide() 
{
    for(var i = 0; i < s.length; i++) 
    {
      s[i].style.display = "none";
    }
}

var i = 0;
function sw() 
{
   hide();
   s[i].style.display = "block";  
   i++;
   if (i >= s.length) i = 0; 
}
hide();
sw();
setInterval(sw, 1000);

Log.console告诉我这个错误：Uncaught TypeError：无法读取属性＆＃39; style＆＃39;未定义的。

Answer 1

您尝试在重新加载之前抓住所有元素。将<script>标记移至<body>的底部。这样，您的元素就会被加载到DOM中。

<body>
  <ul>
    <li class="slider"></li>
    ...
  </ul>
  <script src="javascript/main.js"></script>
</body>

JS中的滑块无法正常工作

1 个答案: