JS 中的简单滑块不起作用

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: Cannot read 属性 'style' of undefined.

Answer 1

您正试图在所有元素加载之前抓取它们。将您的 <script> 标签移动到 <body> 的底部。这样，您的元素将被加载到 DOM.

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

JS 中的简单滑块不起作用

Simply slider in JS not working

javascript

slider