[英]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>
首先从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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.