如何在JQuery上通过MOUSE WHEEL EVENT或CLICK EVENT进行修改?

问题描述 投票:0回答:1

我有一个简单的JQuery图像滑块,该滑块根据鼠标WHEEL滚动来更改幻灯片。我想对其进行修改,以便可以基于鼠标单击事件(在这种情况下,通过两个箭头图像#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>
javascript jquery html css mouseevent
1个回答
0
投票

首先从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);
}

并为click事件添加新的处理程序:

$("#prevBtn").click(function() {
  moveImage(false);
});

$("#nextBtn").click(function() {
  moveImage(true);
});
© www.soinside.com 2019 - 2024. All rights reserved.