Tôi đã tìm kiếm rộng rãi những điều tương tự nhưng không có giải pháp nào hiệu quả nên hỏi ở đây

Tôi muốn thay đổi hình nền trong một vòng lặp [về cơ bản thay đổi lớp của phần tử]. Nhưng phần thực sự khó khăn đối với tôi [mới làm quen với JavaScript] là setTimeOut dừng sau một số lần cố định. Đây là mã:

hàm addHomeInnerClass(selector, imageNumber = 0) {

số hình ảnh += 1;
  if (imageNumber === 1) {
    selector.classList.add('home-content-1');
  }

  if (imageNumber === 2) {
    selector.classList.add('home-content-2');
  }

  if (imageNumber === 3) {
    selector.classList.add('home-content-3');
  }

  if (imageNumber === 4) {
    selector.classList.add('home-content-4');
    số hình ảnh = 0;
  }

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});

Đây là phần HTML của tôi:

Đây là CSS3 của tôi:

.trang chủ {
    hình nền: gradient tuyến tính(sang phải, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
    chiều cao: 88,98vh;

    .home-nội dung-1 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: gradient tuyến tính (sang phải, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url ("/app/assets/images/slider/ (2).jpg") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-2 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: gradient tuyến tính (sang phải, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url ("/app/assets/images/slider/ (3).jpg") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-3 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: gradient tuyến tính (sang phải, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url ("/app/assets/images/slider/(4).jpg") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-4 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: gradient tuyến tính (sang phải, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url ("/app/assets/images/slider/ (1).jpg") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }
  }

Tôi biết mã CSS và HTML không quan trọng ở đây, nhưng sẽ thật tuyệt nếu tôi có thể tìm ra cách khác để làm điều mình muốn.

Tôi muốn làm gì?Sử dụng javascript thuần túy để có được hiệu ứng hình ảnh mờ dần.

Tôi đang bị mắc kẹt ở đâu?Bạn không biết cách chạy setTimeOut vô hạn?

Lưu ý: Tôi không muốn sử dụng bất kỳ thư viện của bên thứ ba nào. Đây là một yếu tố học tập.

câu trả lời hay nhất

như tôi nói trong một bình luận , vấn đề không phải là bộ đếm thời gian ngừng chạy. Điều này là do bạn không xóa lớp cũ khi thêm lớp mới. Đây là cách thực hiện trong khi đơn giản hóa mã của bạn:

hàm addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

Ví dụ (Tôi đã sửa đổi CSS một chút để dễ nhìn thấy các thay đổi hơn; tôi vẫn .trang chủ Những cái còn thiếu đã được thêm vào sau các quy tắc }):

hàm addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});

.trang chủ {
    chiều cao: 88,98vh;
}
    .home-nội dung-1 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-2 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-3 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }

    .home-content-4 {
      chiều cao: 98%;
      bán kính đường viền dưới cùng bên phải: 20rem;
      nền: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") trung tâm/bìa trung tâm không lặp lại;
      chỉ số z: 1;
    }
  }

Giới thiệu về javascript - Làm cách nào để chạy setTimeOut vô hạn? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/57544330/