图像滑块按钮没有检测到点击？

I have an image slider which is working fine rotating images alone using setInterval(). However, the buttons I've added to control which image is clicked aren't responding to click events.

我有一个图像滑块，使用setInterval（）单独工作精细旋转图像。但是，我添加的用于控制单击哪个图像的按钮不响应单击事件。

I have used addEventListener and i'm currently using .on('click') but neither are working.

我使用过addEventListener，我现在正在使用.on（'click'），但两者都没有。

HTML:

HTML：

<div id="sliderContainer"> 
    <img src="assets/image0.png" id="sliderImage"/> 
    <div id="left_holder">
        <img id="leftArrow" src="assets/arrow_left.png">
    </div> 
    <div id="right_holder">
        <img id="rightArrow" src="assets/arrow_right.png">
    </div> 
</div>

CSS:

CSS：

#sliderContainer {
    width: 700px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 5% !important;
}

#sliderImage {
    width: 700px;
    height: 500px;
    position: absolute;
}

#left_holder {
    height: 500px;
    width: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
}

#right_holder {
    height: 500px;
    width: 100px;
    position: absolute;
    right: 0px;
    top: 0px;
}

#leftArrow {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    left: 0px;
}

#rightArrow {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    right: 0px;
}

JS:

JS：

$(document).ready(function () {


/*var leftbtn = document.getElementById("leftArrow");
var rightbtn = document.getElementById("rightArrow");*/
var imagecount = 0;
var total = 4; 
console.log(imagecount);

function slider(x) {
    var Image = document.getElementById('sliderImage');
    imagecount = imagecount + x;

    if (imagecount > total) { 
        imagecount = 0;
    } 

    if(imagecount < 0) {
        imagecount = total;
    } 
    Image.src = "assets/image" + imagecount + ".png"
}

window.setInterval(function sliderA() {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + 1;
    console.log(imagecount);

    if (imagecount > total) {
        imagecount = 0;
    }

   if (imagecount < 0) {
       imagecount = total;
   }

Image.src = "assets/image" + imagecount + ".png" 
},5000);


//EVENT LISTENERS
/*leftbtn.addEventListener("click", slider(-1));
rightbtn.addEventListener("click", slider(1));*/
$(document).on('click', '#leftArrow', slider(-1));
$(document).on('click', '#rightArrow', slider(1));

}); //Doc Ready

1 个解决方案

#1

You have to pass an event handler (callback), not calling that function.

您必须传递一个事件处理程序（回调），而不是调用该函数。

$(document).on('click', '#leftArrow', function() {
    slider(-1);
});
$(document).on('click', '#rightArrow', function() {
    slider(-1);
});