Question

我的滑块控件的代码是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-active-control类来标记当前设置的幻灯片。所以我希望旋转木马控制器有5个可见。

每个元素的高度为95px，边距（滑块控件是垂直的）。所以我想在每个控件上添加-95 px的下一个顶部值的每次点击，这将使我的控件滑动（使用CSS动画），只留下5个控件再次可见（现在从2-6个控件而不是1-5）。我找不到jquery采用类et-pb-active-control元素的方法，如果单击下一个元素或下一个元素。

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

Answer 1

$(document).ready(function(){

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

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

  });

});

Example

Answer 2

试试这个

var position = 0;	
		$('.next').click(function(){
			position = parseInt(position) -95;
			$('.et-pb-controllers').css("top",position);
			console.log('here');
		})
		$('.prev').click(function(){
			position = parseInt(position) +95;
			$('.et-pb-controllers').css("top",position);
         })

.wrap{
				height: 475px;
				width: 600px;
			}
			.wrap-controllers{
				height: 100%;
				width: 10%;
				display: inline-block;
				overflow: hidden;
				position: relative;
			}
			.wrap-controllers a{
				height: 95px;
				display: block;
			}
			.slider{
				height: 100%;
				width: 89%;
				background: gray;
				display: inline-block;
			}
			.et-pb-controllers{
				top: 0;
				position: absolute;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
		  <div class="slider">
		  </div>
		  <div class="wrap-controllers">
			  <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>
			</div>
		</div>
<button class="prev">Prev</button>
<button class="next">Next</button>

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

2 个答案: