如何在一个页面中多次重用一段Javascript

Question

我是个网站新手，我有一个关于使用Javascript函数的问题(可能是很基本的)，这个函数是为幻灯片编写的。

var currentSlide = 0
var totalSlides = $('.holder div').length

var nextSlide = function() {
console.log('nextSlide')
currentSlide = currentSlide + 1

if (currentSlide >= totalSlides) {
    currentSlide = 0
}

var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
}


var prevSlide = function() {

  currentSlide = currentSlide - 1


if (currentSlide < 0) {
  currentSlide = totalSlides - 1
}


var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

}

var autoSlide = setInterval(function() {
  nextSlide()
}, 100000000)

$('.next').on('click', function() {
  clearInterval(autoSlide)
  nextSlide()
})

$('.prev').on('click', function() {
  clearInterval(autoSlide)
  prevSlide()
})


var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

$('body').on('keydown', function(event) {

  var keyCode = event.keyCode

  if (keyCode == 37) {
    clearInterval(autoSlide)
    prevSlide()
  }

  if (keyCode == 39) {
    clearInterval(autoSlide)
    nextSlide()
  }

})

我在HTML中的设置如下：

<main class="scroll-container">
         <section id="project-1" class="toxic-yellow">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/01.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 1</p>
           <p class="steps"></p>
         </section>
         <section id="project-2" class="lilac">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/05.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 2</p>
           <p class="steps"></p>
         </section>

诸若此类。我在同一页上总共有12张幻灯片。我遇到的问题是，脚本在整个页面上全局应用，但我希望控制每个幻灯片放映彼此独立。有没有办法重用这个脚本，并将其单独应用于幻灯片的每个实例？

谢谢你的帮忙!

Answer 1

您可以使用JavaScript函数或类。

W3Schools Reference Functions

W3Schools Reference Classes

Answer 2

$('body').on('keydown', function(event)

这样，您就可以将更改应用于所有元素。

根据您的代码判断，您可以触发事件侦听器将幻灯片仅更改为id为"project-X“的父元素(section)的子元素。看一看here