Javascript 鼠标滚轮方向不工作

在我的html中，我集成了卡片，它由鼠标滚轮控制。问题是，当我滚动鼠标时，它会显示下一张卡片，这很好，但当我向上滚动时，它不会更改为上一张卡片。 向上滚动1->5->4->3->2->1的预期结果 现实在向上滚动1->2->3->4->5->6

flag=1；
$（“body”）.mousewheel（函数（）{
如果（标志==0）{
$（#side1”）.css（“z-index”，“999”）；
$（“#side2”）.css（“z-index”，“9”）；
$（“#side3”）.css（“z-index”，“9”）；
$（“#side4”）.css（“z-index”，“9”）；
$（“#side5”）.css（“z-index”，“9”）；
$（#side1”）.css（“转换”、“translateX（0px）比例（1.5）”；
$（“#side2”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side3”）.css（“transform”，“translateX（100px）”）；
$（“#side4”）.css（“transform”，“translateX（100px）”）；
$（“#side5”）.css（“transform”，“translateX（100px）”）；
flag=1；
}else if（标志==1）{
$（“#side2”）.css（“z-index”，“999”）；
$（#side1”）.css（“z-index”，“9”）；
$（“#side4”）.css（“z-index”，“9”）；
$（“#side5”）.css（“z-index”，“9”）；
$（“#side3”）.css（“z-index”，“9”）；
$（#side2”）.css（“转换”、“translateX（0px）比例（1.5）”；
$（“#side1”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side4”）.css（“transform”，“translateX（100px）”）；
$（“#side5”）.css（“transform”，“translateX（100px）”）；
$（“#side3”）.css（“transform”，“translateX（100px）”）；
flag=2；
}else if（标志==2）{
$（“#side3”）.css（“z-index”，“999”）；
$（“#side4”）.css（“z-index”，“9”）；
$（“#side5”）.css（“z-index”，“9”）；
$（#side1”）.css（“z-index”，“9”）；
$（“#side2”）.css（“z-index”，“9”）；
$（“#side3”）.css（“转换”、“translateX（0px）标度（1.5）”；
$（“#side4”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side5”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side1”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side2”）.css（“transform”，“translateX（100px）”）；
flag=3；
}else if（标志==3）{
$（“#side4”）.css（“z-index”，“999”）；
$（“#side5”）.css（“z-index”，“9”）；
$（“#side3”）.css（“z-index”，“9”）；
$（#side1”）.css（“z-index”，“9”）；
$（“#side2”）.css（“z-index”，“9”）；
$（#side4”）.css（“转换”、“translateX（0px）比例（1.5）”；
$（“#side5”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side3”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side1”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side2”）.css（“transform”，“translateX（100px）”）；
flag=4；
}else if（标志==4）{
$（“#side5”）.css（“z-index”，“999”）；
$（“#side4”）.css（“z-index”，“9”）；
$（“#side3”）.css（“z-index”，“9”）；
$（#side1”）.css（“z-index”，“9”）；
$（“#side2”）.css（“z-index”，“9”）；
$（#side5”）.css（“转换”、“translateX（0px）比例（1.5）”；
$（“#side4”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side3”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side1”）.css（“转换”、“translateX（-100px）比例（1）”；
$（“#side2”）.css（“transform”，“translateX（100px）”）；
flag=0；
}
});
#主{
位置：绝对位置；
利润率最高：10%；
左：35%；
}
#侧面1{
高度：200px；
宽度：350px；
位置：绝对位置；
转换：translateX（0px）比例（1.5）；
z指数：99；
边框：2倍纯色灰色；
过渡：全部5秒；
背景色：#F3；
边界半径：0.035cm；
背景色：rgb（243243243243）；
盒影：0.023cm0.043cm0.1778cm0.0762cmRGB（0,0,0）；
}
#侧面2{
高度：200px；
宽度：350px；
位置：绝对位置；
转换：translateX（-100px）；
z指数：9；
边框：2倍纯色灰色；
过渡：全部5秒；
边界半径：0.035cm；
背景色：rgb（243243243243）；
盒影：0.023cm0.043cm0.1778cm0.0762cmRGB（0,0,0）；
}
#侧面3{
高度：200px；
宽度：350px；
位置：绝对位置；
转换：translateX（100px）；
z指数：9；
边框：2倍纯色灰色；
过渡：全部5秒；
边界半径：0.035cm；
背景色：rgb（243243243243）；
盒影：0.023cm0.043cm0.1778cm0.0762cmRGB（0,0,0）；
}
#侧面4{
高度：200px；
宽度：350px；
位置：绝对位置；
转换：translateX（110px）；
z指数：9；
边框：2倍纯色灰色；
过渡：全部5秒；
边界半径：0.035cm；
背景色：rgb（243243243243）；
盒影：0.023cm0.043cm0.1778cm0.0762cmRGB（0,0,0）；
}
#侧面5{
高度：200px；
宽度：350px；
位置：绝对位置；
转换：translateX（100px）；
z指数：9；
边框：2倍纯色灰色；
过渡：全部5秒；
边界半径：0.035cm；
背景色：rgb（243243243243）；
盒影：0.023cm0.043cm0.1778cm0.0762cmRGB（0,0,0）；
}
#前{
高度：30px；
宽度：100px；
边框：2倍纯白；
字体系列：arial；
字体大小：15px；
颜色：黑色；
文本对齐：居中；
线高：30px；
位置：绝对位置；
利润率最高：15%；
左：10%；
}
#前：悬停{
光标：指针；
}
#nex{
高度：30px；
宽度：100px；
边框：2倍纯白；
字体系列：arial；
字体大小：15px；
颜色：黑色；
文本对齐：居中；
线高：30px；
位置：绝对位置；
利润率最高：15%；
右：10%；
}
#nex：悬停{
光标：指针；
}
#细部{
填充顶部：10px；
}
.伯爵{
字号：28px；
左侧填充：10px；
填充顶部：6px；
颜色：#94b4d7；
转换：比例（1.4）；
字体大小：400；
字体系列：“Roboto”；
}
.卡片标题{
左边距：-10px；
填充顶部：23px；
字体大小：14px；
颜色：#666666；
}
.文字{
字体大小：10px；
左边距：2倍；
字号：500；
颜色：#6161；
}
.wordimg{
左边距：22px；
}
.标志性{
高度：80px；
}

以前的
1.
我们听着，而你告诉我们
您的项目

您的预算

您的口味

你的抱负

2.
你列出
if (event.deltaY < 0)
    flag--;
  else
    flag++;