个人中心
gpt4 book ai didi

javascript - 环境/设置 - JavaScript slider - "Cannot set property ' className' of undefined"

转载 作者：行者123 更新时间：2023-11-30 15:10:02 24 4
gpt4 key购买 nike

<分区>

我决定在 Sitepoint tutorial 的帮助下创建小而简单的 slider 作为我实践的一部分。

不幸的是，由于代码在他们的教程中有效，它确实为我返回了一个错误:

TypeError: Cannot set property 'className' of undefined at nextSlide

当我在 jsfiddle 中设置所有内容时(这里是链接 https://jsfiddle.net/9ndfhn4e/)，一切正常。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gulp Starter Environment</title>
  <link rel="stylesheet" href="css/main.css"/>
  <script src="js/j.js"></script>
</head>
<body>
  <ul id="slides">
      <li class="slide showing">Slide 1</li>
      <li class="slide">Slide 2</li>
      <li class="slide">Slide 3</li>
      <li class="slide">Slide 4</li>
      <li class="slide">Slide 5</li>
  </ul>
</body>
</html>

CSS

* {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%; }

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

#slides {
  position: relative;
  height: 300px;
  padding: 0px;
  margin: 0px;
  list-style-type: none; }

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s; }

.showing {
  opacity: 1;
  z-index: 2; }

.slide {
  font-size: 40px;
  padding: 40px;
  box-sizing: border-box;
  background: #333;
  color: #fff; }

.slide:nth-of-type(1) {
  background: red; }

.slide:nth-of-type(2) {
  background: orange; }

.slide:nth-of-type(3) {
  background: green; }

.slide:nth-of-type(4) {
  background: blue; }

.slide:nth-of-type(5) {
  background: purple; }

JS

var slides = document.querySelectorAll("#slides .slide");
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = "slide";
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = "slide showing";
}

我认为可能是环境问题，但我想不出来。也许有人有想法。感谢您的帮助。

24 4 0
文章推荐： javascript - React JS，单击显示元素的下拉列表
文章推荐： javascript - 如何从对象数组中为每个不同的 'number' 获取最大值为 'type' 的对象？
文章推荐： javascript - 关闭 Angular 模态后如何重置所有 HTML 输入字段
文章推荐： javascript - 在 Chrome 中打开文件对话框之前，可以多次单击文件输入
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com