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

Question

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

我已经使用addEventListener，我目前使用.on（'click'），但都没有工作。

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：

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

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

Answer 1

你要通过一个事件处理程序（回调），不调用该函数。

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