Javascript 如何在幻灯片中将内联事件处理程序替换为事件侦听器

我想知道是否有人能为我指出如何将内联事件处理程序替换为事件侦听器的正确方向。 我有一个幻灯片，下面有一个图片库，每当用户单击“下一步/上一步”按钮或图库中的迷你图片时，就会调用一个带有值的函数，即：

onclick=“exfunction（-1）

。 我对javascript完全陌生，不知道如何通过事件侦听器传递值。任何想法都会非常有用

以下是我的一些代码：

 <div class="slides gallery">
      <img src="image">
  </div>

  <div class="slides gallery">
      <img src="image"> 
  </div>


 <button class="prev2" onClick="plusSlides(-1)"> &#10094;</button>
 <button class="next2" onClick="plusSlides(1)"> &#10095;</button>

 <div class="row-pic">
      <img class="mini-pic" src="image" width="100" onclick="currentSlide(5)">
 </div>
    
 <div class="row-pic">
      <img class="mini-pic" src="image" onclick="currentSlide(6)" >
</div>


JS

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  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";
}

❮
❯
JS
var slideIndex=1；
放映幻灯片（幻灯片索引）；
//下一个/上一个控件
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
//缩略图图像控件
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“幻灯片”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

使用事件侦听器时更安全，因为当前函数声明为全局函数，可以通过console.log或其他方式调用

检查如何转换为下面的事件侦听器

<div class="slides gallery">
      <img src="image">
  </div>

  <div class="slides gallery">
      <img src="image"> 
  </div>


 <button class="prev2"> &#10094;</button>
 <button class="next2"> &#10095;</button>

 <div class="row-pic">
      <img class="mini-pic" src="image" width="100" value="5">
 </div>
    
 <div class="row-pic">
      <img class="mini-pic" src="image" value="6">
</div>


<script>
$(document).ready(function () {
    var slideIndex = 1;
    $('.prev2').click(function(){
        showSlides(slideIndex -= 1);
    })

    $('.next2').click(function(){ 
        showSlides(slideIndex += 1);
    })

    $(".mini-pic").click(function(){
        showSlides(this.value);
    });

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("slides");
        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";
    }
});
</script>

❮
❯
$（文档）.ready（函数（）{
var slideIndex=1；
$（'.prev2'）。单击（函数（）{
放映幻灯片（幻灯片索引-=1）；
})
$（'.next2'）。单击（函数（）{
放映幻灯片（幻灯片索引+=1）；
})
$（“.mini pic”）。单击（函数（）{
放映幻灯片（此.value）；
});
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“幻灯片”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

正如你们所看到的，若你们想输入一些参数，比如图片的索引，你们可以通过值传递