Не понимаю использование "n" в JavaScript - PullRequest
Новая
       13

Не понимаю использование "n" в JavaScript

0 голосов
/ 12 мая 2019

Я пытаюсь создать слайд-шоу / карусель и нашел ссылку на "https://www.w3schools.com".. Код очень прост и понятен, но я не понимаю логику в JavaScript, что периметр" n "ведетя чокнутый. Может ли кто-нибудь объяснить во мне, что делает и что использует этот «н»?

(я не могу задать вопрос, и мне нужно больше слов)Sint nihil est takenda nam obcaecati sed, dolorem in aut error nousciunt inventtore amet deserunt quisquam quis porro labouriosam eaque perferendis nulla, dicta distinctio magni. Fugit nihil consequatur quam magnam fuga explicabé ap nt ic ic 100 in in in in in in in in in 100 100 100 100 100 in in* 

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>

Ответы [ 2 ]

1 голос
/ 12 мая 2019

Соответствующий код: 

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.

1 голос
/ 12 мая 2019

n, переданный каждой функции, - это не что иное, как параметр , переданный этой соответствующей функции, 

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

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

В приведенных выше двух функциях n - это параметр, переданный ему. 

<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>

Здесь вы видите, что передаете 1, 2, 3 значения функциям currentSlide(). n будет содержать значения, которые вы передадите в функцию. Здесь будет 1 или 2 или 3.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...