时间戳

首页 > 解决方案 > 不明白 JavaScript 中“n”的使用

javascript - 不明白 JavaScript 中“n”的使用

问题描述

我正在尝试构建幻灯片/轮播，并且在“ https://www.w3schools.com ”上找到了一些参考。代码非常简单明了，但我不理解 JavaScript 中的逻辑，边界“n”让我发疯。有人可以解释一下我在做什么以及那个“n”的用途吗？

（我无法发布问题，我需要更多的话）Lorem ipsum dolor sit，amet consectetur adipisicing elit。Sint nihil estsumptionnda nam obcaecati sed, dolorem in aut error nesciuntinventreamet deserunt quisquam quis porro laboriosam eaque perferendis nulla, dicta distinctio magni。Fugit nihil consequatur quam magnam fuga explicabo sapiente in esse, perferendis hic ratione placeat aliquam deserunt aperiam?

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
</body>
</html>

标签： javascriptiteratorslider

解决方案

相关代码为：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

plusSlides

这是一个plusSlides可能更清晰的版本：

function plusSlides(n) {
  slideIndex = slideIndex + n;
  showSlides(slideIndex);
}

如果您调用它并传入一个数字，该函数将接收该数字作为参数n，它：

  1. 将该数字 ( n)添加slideIndex到（这是函数关闭的变量），将结果保存在slideIndex; 和
  2. 使用结果调用showSlides（刚刚存储在slideIndex

例如，如果slideIndex是 2 并且您将 1 传递给plusSlides，它将设置slideIndex为 3（它的旧值 2 加 1）并在索引 3 处显示幻灯片。

currentSlide

可能更清晰的版本currentSlide是：

function currentSlide(n) {
  slideIndex = n;
  showSlides(slideIndex);
}

如果你currentSlide用一个号码打电话，它会收到这个号码，n并且

  1. 设置 slideIndex为该数字；和
  2. 调用showSlides结果

因此，例如，如果slideIndex是 2 并且您将 1 传递给currentSlide，它将设置slideIndex为 1（替换其旧值）并在索引 1 处显示幻灯片。

推荐阅读