如何在 JQuery 上修改鼠標滾輪事件或單擊事件？
[英]How can I modify a MOUSE WHEEL EVENT o a CLICK EVENT on JQuery?
問題描述
我有一個簡單的 JQuery 圖像滑塊，它可以根據鼠標 WHEEL 滾動來更改幻燈片。 我想修改它，以便我可以根據鼠標 CLICK 事件更改幻燈片（在這種情況下，通過兩個箭頭圖像，#prevBtn 和 #nextBtn）。
有人可以幫我嗎？ 太感謝了！
$flag = true; $counter = 1; $(window).on('wheel', function(event){ if($flag) { $flag = false; if(event.originalEvent.deltaY > 0) { // EXECUTE ON MOUSE WHEEL DOWN $counter++; if($counter==1) $counter++; if($counter==2) { $(".colorbox1").animate({'top':'-100%'}); $(".colorbox2").animate({'top':'0%'}); $(".red_info").animate({'top':'-100%'},700); $(".orange_info").animate({'top':'0%'},700); $(".img1").animate({'top':'-50%'},700); $(".img2").animate({'top':'50%'},700); } if($counter==3) { $(".colorbox2").animate({'top':'-100%'}); $(".colorbox3").animate({'top':'0%'}); $(".orange_info").animate({'top':'-100%'},700); $(".green_info").animate({'top':'0%'},700); $(".img2").animate({'top':'-50%'},700); $(".img3").animate({'top':'50%'},700); } if($counter > 3) $counter = 3; } else { // EXECUTE ON MOUSE WHEEL UP $counter--; if($counter <= 1) $counter = 1; if($counter == 2) { $(".colorbox3").animate({'top':'100%'}); $(".colorbox2").animate({'top':'0%'}); $(".green_info").animate({'top':'100%'},700); $(".orange_info").animate({'top':'0%'},700); $(".img3").animate({'top':'150%'},700); $(".img2").animate({'top':'50%'},700); } if($counter == 1) { $(".colorbox2").animate({'top':'100%'}); $(".colorbox1").animate({'top':'0%'}); $(".orange_info").animate({'top':'100%'},700); $(".red_info").animate({'top':'0%'},700); $(".img2").animate({'top':'150%'},700); $(".img1").animate({'top':'50%'},700); } if($counter == 3) $counter--; } setTimeout(function(){$flag = true;},500); }
body { margin: 0; padding: 0; height: 120%; } .img1, .img2, .img3 { width: 450px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; } .img2, .img3 { top: 150%; } .box2 { height: 100%; width: 50%; position: absolute; top: 0; left: 50%; } .colorbox1, .colorbox2, .colorbox3 { height: 100%; width: 100%; background-color: red; position: absolute; top: 0; left: 0; } .colorbox2 { background-color: orange; top: 100%; } .colorbox3 { background-color: aquamarine; top: 100%; } #prevBtn { height: 5vh; cursor: pointer; position: absolute; right: 350px; top: 390px; } #nextBtn { height: 5vh; cursor: pointer; position: absolute; right: 250px; top: 380px; z-index: 2; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="test mobile.css"> </head> <body> <img src="Images/1.png" alt="" class="img1"> <img src="Images/2.png" alt="" class="img2"> <img src="Images/3.png" alt="" class="img3"> <div class="box2"> <div class="colorbox1"></div> <div class="colorbox2"></div> <div class="colorbox3"></div> </div> <img src="Images/Arrow Left.svg" alt="" id="prevBtn"> <img src="Images/Arrow Right.svg" alt="" id="nextBtn"> <script src="jquery-3.4.1.min.js"></script> <script type="text/javascript" src="test mobile.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2020-03-18 04:26:09
首先從wheel處理程序中刪除代碼並將其轉移到一個新函數中：
moveImage(next) {
if ($flag) {
$flag = false;
if (next) {
...
}
else {
...
}
setTimeout(function(){$flag = true;},500);
}
然后用這個新函數替換輪子處理程序上的代碼：
$(window).on('wheel', function(event){
moveImage(event.originalEvent.deltaY > 0);
}
並為點擊事件添加新的處理程序：
$("#prevBtn").click(function() {
moveImage(false);
});
$("#nextBtn").click(function() {
moveImage(true);
});
如何在 JavaScript 上捕獲雙擊鼠標中鍵（滾輪）事件？
[英]How to capture the double click mouse middle button(wheel) event on JavaScript?
jQuery click（）事件； 如何防止右鍵單擊btn單擊此事件？
[英]jQuery click() event; how to prevent this event on right mouse btn click?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.