Question

我有一个带有箭头的silder的完整JavaScript代码。但是，此JavaScript代码不会自动更改幻灯片。任何人都可以帮我升级这个JS代码，所以几秒后div会自动改变。

JavaScript代码：

let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show previous slide
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next slide
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

HTML代码：（我只有两张幻灯片）

<div class="wrap">
  <!-- slider arrow -->
  <div class="arrow" id="arrow-left">
    <img class="zoom" src="images/icon_arrow_left.png" alt="arrow-left">
  </div> <!-- end slider arrow -->

  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <h2>WELCOME TO EMS STUDIO</h2>
        <p class="italic">Together we lift your training to the new 
levels</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>

    <div class="slide slide2">
      <div class="slide-content">
        <h2>EMS TRAINING FROM xBODY</h2>
        <p class="italic">Get your dream body with 30 minutes of exercise, 
only twice a week!</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>
  </div>

  <!-- slider arrow -->
  <div class="arrow" id="arrow-right">
    <img class="zoom" src="images/icon_arrow_right.png" alt="arrow-right">
  </div> <!-- end slider arrow -->
</div>

<script type="text/javascript" src="scripts/slider.js"></script>

谢谢！

Answer 1

＆＃13;

let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show previous slide
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next slide
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});
// Interval for slider
var a = function(){
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
}
setInterval(a, 2000);

startSlide();

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div class="wrap">
  <!-- slider arrow -->
  <div class="arrow" id="arrow-left">
    <img class="zoom" src="images/icon_arrow_left.png" alt="arrow-left">
  </div> <!-- end slider arrow -->

  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <h2>WELCOME TO EMS STUDIO</h2>
        <p class="italic">Together we lift your training to the new 
levels</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>

    <div class="slide slide2">
      <div class="slide-content">
        <h2>EMS TRAINING FROM xBODY</h2>
        <p class="italic">Get your dream body with 30 minutes of exercise, 
only twice a week!</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>
  </div>

  <!-- slider arrow -->
  <div class="arrow" id="arrow-right">
    <img class="zoom" src="images/icon_arrow_right.png" alt="arrow-right">
  </div> <!-- end slider arrow -->
</div>
</body>
</html>

＆＃13;

我在您的脚本末尾添加了评论。

自动更改sildes

1 个答案: