带页码的幻灯片 javascript

Question

我制作了幻灯片。我想添加一些带有页码的描述。我试图添加函数 sliderText() 以获得结果 - "Image 1 of 7" 等

我不知道这里出了什么问题。有人可以给我一些提示吗？

提前谢谢你，鲇

var img_index = 0;
var imgs = [
  "assets/1.jpg",
  "assets/2.jpg",
  "assets/3.jpg",
  "assets/4.jpg",
  "assets/5.jpg",
  "assets/6.jpg",
  "assets/7.jpg"

];


function findNextImage(isPrev) {
  switch (true) {
    case !!(isPrev && imgs[img_index + 1]):
      img_index += 1
      return imgs[img_index]

    case !!imgs[img_index + 1]:
      img_index += 1
      return imgs[img_index]

    default:
      img_index = 0
      return imgs[img_index]

  }

  sliderText()
}



function checkKey(event) {
  if (event.keyCode == '39') {
    document.getElementById("images").src = findNextImage();
    
  } else if (event.keyCode == '37') {
    document.getElementById("images").src = findNextImage(true);
  }

}

document.onkeydown = checkKey;





function sliderText() {
  var text = document.getElementsByClassName("slideshow_text");
  var imageNumber = img_index + 1;
  text.innerHTML = "image " + imageNumber + " of " + imgs.length;

}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
</head>
<h1 class="slideshow_text">Image 1 of 7</h1>
<img id="images" src="assets/1.jpg" />


<body>

</body>
<script src="test.js"></script>

</html>

Answer 1

一些修改以提高代码质量

我删除了不是纯函数的 findNextImage 并引入了 findNextImageIndex：findNextImageIndex 既不访问也不修改任何外部变量，因此更易于阅读。 sliderText 将 imgIndex 作为参数，以便您可以轻松查看设置文本所需的参数。

进一步的建议

考虑将预设值 Image 1 of 7 和 "assets/1.jpg" 从 HTML 也移动到 JavaScript。使用从数组中获取的 "assets/1.jpg" 初始化滑块并最初调用 sliderText(state.imgIndex); 一次。

请注意，我将幻灯片放映 HTML 移到了 <body> 中以使其有效 HTML。

修改后的代码

var state = {
  imgIndex: 0
};
var imgs = [
  "assets/1.jpg",
  "assets/2.jpg",
  "assets/3.jpg",
  "assets/4.jpg",
  "assets/5.jpg",
  "assets/6.jpg",
  "assets/7.jpg"
];

function findNextImageIndex(imgIndex, isPrev) {
  if(isPrev) {
    if(imgIndex <= 0) {
      return imgs.length - 1;
    } else {
      return imgIndex - 1;
    }
  } else {
    if(imgIndex >= imgs.length - 1) {
      return 0;
    } else {
      return imgIndex + 1;
    }
  }
}

function sliderText(imgIndex) {
  var text = document.getElementsByClassName("slideshow_text")[0];
  var imageNumber = imgIndex + 1;
  text.innerHTML = "image " + imageNumber + " of " + imgs.length;
}

function goToNextImage(isPrev) {
  state.imgIndex = findNextImageIndex(state.imgIndex, isPrev);
  document.getElementById("images").src = imgs[state.imgIndex];
  sliderText(state.imgIndex);
}

function checkKey(event) {
  switch(event.keyCode) {
    case 37: goToNextImage(true); break;
    case 39: goToNextImage(false); break;
  }
}

document.onkeydown = checkKey;

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
</head>

<body>
  <h1 class="slideshow_text">Image 1 of 7</h1>
  <img id="images" src="assets/1.jpg" />
  <script src="test.js"></script>
</body>

</html>

带页码的幻灯片 javascript

slideshow with page numbers javascript

javascript

slideshow