javascript - 在没有 Jquery 的 JavaScript 中使用 addEventListener 切换图像

Question

我正在尝试使用 addEventListner 切换图像。我可以用数组来做，但尝试用事件监听器进行测试，但遇到了问题。

HTML:

<img id="previous" style="left: 0">&lt;</img>
<img id="mainImg" src="https://res.cloudinary.com/vaqar/image/upload/v1499825595/DSC_0015_b0hr2j.jpg"></img>
<img id="next" style="right: 0">&gt;</img>

JavaScript:

const slider = [
    {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg",
   },
   {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826238/DSC_0360_sfwyqh.jpg",

   },
   {
       imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826221/DSC_0303_esrlla.jpg",
   },
];

 var i = 0;

 var sliderImg = document.querySelector("mainImg");
 sliderImg.addEventListener('click', function(e){
       e.src = e[i+1].imgSrc;
       ++i;
 });

Answer 1

点击事件的事件不是对象本身，而是一个Event对象。您需要访问 target 属性来设置 src。

e.target.src

此外，您正在尝试对事件而不是数组本身使用数组语法。 e[i+1].imgSrc 什么都不是。您可以采取一些策略来正确循环图像数组。一种是跟踪数组中图像的当前索引，并在每次单击时增加它。我认为这是您基于 i 变量的方向。

注意:请注意单击事件处理程序内的范围。 此 范围已更改，除非您处于可以使用箭头功能的情况。

// Your array is overly complex
const slider = [
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" },
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826238/DSC_0360_sfwyqh.jpg" },
  { imgSrc: "https://res.cloudinary.com/vaqar/image/upload/v1499826221/DSC_0303_esrlla.jpg" },
];

 var sliderImg = document.querySelector("mainImg");
 sliderImg.addEventListener('click', function(e){
       i++;
       // test if you've exceeded the array limits and loop back to 0.
       if (i === slider.length) {
            i = 0;
       }       
               // use slider here
       e.target.src = slider[i].imgSrc;

 });