Javascript 如果单击了下一个元素（）-Jquery

我的滑块控件有以下html代码：

<div class="et-pb-controllers">

<a href="#" class="">1</a>
<a href="#" class="">2</a>
<a href="#" class="">3</a>
<a href="#" class="">4</a>
<a href="#" class="">5</a>
<a href="#" class="et-pb-active-control">6</a>
<a href="#">7</a><a href="#">8</a>
<a href="#">9</a><a href="#">10</a>

</div>

使用et pb主动控制类标记当前设置的幻灯片。所以我想要有5个可视的旋转木马控制器

每个元素的高度为95px，带边距（滑块控件为垂直）。因此，我想在每个控件上添加下一个顶部值-95 px的每次单击，这将使我的控件滑动（带有CSS动画），只剩下5个控件再次可见（从现在的2-6个控件变为1-5个）。我找不到一种方法，让jquery获取一个类为et pb active control的元素，以及是否单击了next元素或next是2个元素

希望我足够清楚。提前谢谢

$(document).ready(function(){

  $(document).on("click",".et-pb-active-control", function(){

    $(this).next().css("background-color", "red");

  });

});

试试这个

var位置=0；	
$（'.next'）。单击（函数（）{
位置=parseInt（位置）-95；
$（'.et pb controllers'）.css（“顶部”，位置）；
console.log（'here'）；
})
$（'.prev'）。单击（函数（）{
位置=parseInt（位置）+95；
$（'.et pb controllers'）.css（“顶部”，位置）；
})

.wrap{
身高：475px；
宽度：600px；
}
.wrap控制器{
身高：100%；
宽度：10%；
显示：内联块；
溢出：隐藏；
位置：相对位置；
}
.包装控制器a{
高度：95px；
显示：块；
}
.滑块{
身高：100%；
宽度：89%；
背景：灰色；
显示：内联块；
}
.et pb控制器{
排名：0；
位置：绝对位置；
}

上
接下来

“希望我足够清楚。”从这里的角度来看，不完全清楚什么是需求。单击

.et-pb-active-control

时，您是否正在尝试设置

css

top

后面的

.et-pb-active-control

元素？你们能把你们试图解决这个问题的

css

和

javascript

包括进来吗？有很多关于旋转木马的教程，但我还是要给你们一个提示：你们应该把你们的

a

元素包装在另一个div中。这样你们只需要用css移动这个div并制作动画，而不是用所有的元素