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

1 个答案: