Question

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

我使用了addEventListener，我目前正在使用.on（＆＃39;点击＆＃39;），但两者都没有。

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

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

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    function getContent(event) {
       event.preventDefault();
       document.getElementById("contentFrame").src="LoremIpsum.html";
    }
    </script>


</head>

<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
    <li>Configuration Guides</li>
    <li>API Guides</li>
    <li><a href="#" onclick='getContent(event)'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button>    -->

</div>


<iframe class="content"  id="contentFrame" src="dummy.html">
</iframe>

</body>

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

1 个答案: